CSS前戏

主要用来调节html标签的各种样式

"""

思考:页面都是由HTML构成的 并且页面上有很多相同的HTML标签 但是相同的HTML标签在不同的位置可能有不同的样式 我们如何区分标签

标签的两大重要属性>>>:区分标签

	1.class属性

		分门别类 主要用于批量查找

	2.id属性

		精确查找 主要用于点对点

学习css的流程

	1.先学习如何查找标签

	2.再学习如何调整样式

	css注释语法

	/*注释内容*/

"""

1.css语法结构

每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。

选择器 {

    	样式名1:样式值1;

    	样式名2:样式值2

}

2.css注释语法

/*注释内容*/

3.引入css的多种方式

1.head内style标签内部编写(学习的时候使用)

<p style="color: red">Hello world.</p>

2.head内link标签引入(标准的方式)

<link href="mystyle.css" rel="stylesheet" type="text/css"/>

3.标签内部通过style属性直接编写(不推荐)

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        p{

            background-color: #2b99ff;

        }

    </style>

</head>

4.@import外部引入

CSS基本选择器

1.标签选择器

直接按照标签名查找标签

    	div {

                color: red;

            }

	<div>cloud</div>

2.类选择器

按照标签的class值查找标签

    	.c1 {

            color: green;

        }

	<p class="c1">cloud</p>

3.id选择器

根据标签的id之精准查找标签

    	#d1 {

            color: yellow;

        }

	<p id="c1">cloud</p>

4.通用选择器

直接选择页面所有的标签

    	* {

            color:blue;

        }

CSS组合选择器

使用各种连接符将基本CSS进行组合 就产生了CCS组合选择器

用家族关系来描述CSS嵌套层级

示例：

	<p>ppp</p>

        <p>ppp</p>

        <div>div

            <p>div p</p>

            <div>div div

                <p>div div p

                    <span>div div p span</span>

                </p>

            </div>

            <span>div span</span>

        </div>

        <p>ppp</p>

        <span>span span</span>

<!--

针对标签的上下层级以及嵌套有另外的说法

        父标签 后代标签 子标签 弟弟标签 哥哥标签 祖先标签

我们选定一个标签 那他同级上面的标签为哥标签，同级下面的标签为弟标签。

-->

1.后代选择器(空格)

查找div里的 所有后代span 也就是查找到最深的嵌套层级

    div span {

            color: red;

        }

2.儿子选择器 >

查找div里第一层级的span 区分好儿标签和孙标签！

    div>span {

            color: yellow;

        }

3.毗邻选择器 +

查找div下面紧挨着他的span 只找一个

查找不到就失效

    div+span {

            color: yellow;

        }

4.弟弟选择器 ~

查找div下面同级别所有span 可以找多个

    div~span {

            color: yellow;

        }

分组和嵌套

分组 div,p,span

多个选择器合并查找 彼此之间是独立的

是为了简化代码 而产生的写法

div,p,span {  # 多个选择器合并查找

        color: yellow;

    }

#d1,.c1,span {

        color: green;

    }

嵌套

满足多个条件的标签才能被查找到。注意和CSS组合选择器有所区分！！这中间是没有连接符的 ! !

注意不能这样：divp 要么这样div p 要么这样div .c1

div.c1 {  查找class含有c1的div

        color: red;

    }

div#d1 {  查找id是d1的div

        color: red;

    }

.c1 p.c2 {  查找含有c1样式值里面的含有c2样式值的p标签 组合 + 嵌套

       color: antiquewhite;

    }

属性选择器 [username]

[username] {	按照属性名查找

    color: red;

}

[username='jason'] {  按照属性名等于属性值

    color: yellow;

}

div[username='jason'] {

    color: darkcyan;

}

伪类选择器 a:link hover active visited input:focus

选择处于某种特殊状态的元素，根据状态选择标签

"""a标签补充说明 针对没有点击过的网址 默认是蓝色 点击过的则为紫色

通过伪类选择器可以修改a标签各种不同状态下的颜色：

没点过link 悬停hover 点下去不松开active 已经访问过的标签visited """

举例1：当悬停在a标签上 a标签变成桔色：

 a:hover {

        color: orange;

    }

举例2：设定input获取焦点(被点击)之后采用的样式

input:focus {

  background-color: red;

}

伪元素选择器 :before

主要用于向指定的选择器添加指定的效果。

伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。



			p:first-letter {

				font-size: 48px;

				color: red;

			}

			p:before {		css添加文本无法正常选中

				content: '嘿嘿嘿';

				color: blue;

			}

			p:after {		css添加文本无法正常选中

				content: '呵呵呵';

				color: red;

			}



来自菜鸟教程的总结：

伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的id、class、属性等静态的标志。由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。

与伪类针对特殊状态的元素不同的是，伪元素是对元素中的特定内容进行操作，它所操作的层次比伪类更深了一层，也因此它的动态性比伪类要低得多。实际上，设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。

选择器优先级

继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如一个body定义了的字体颜色值也会应用到段落的文本中。

此时页面上所有标签都会继承body的字体颜色。然而CSS继承性的权重是非常低的，是比普通元素的权重还要低的0。

我们只要给对应的标签设置字体颜色就可覆盖掉它继承的样式

1.选择器相同 导入方式不同

	就近原则

2.选择器不同 导入方式相同

	内联样式1000 > id选择器100> 类选择器10 > 标签选择器1 > 继承0



附一张经典图片：

CSS样式条件 常见属性

字体样式 font text

font-size:14px 24px 28px 36px  字体代码

font-weight: lighter;          字体粗细

text-align: center		文本居中

text-decoration: none;  主要用于a标签取消下划线

text-indent: 32px;		首行缩进

颜色 color

使用取色器工具可获得rgb颜色

color:三种模式

    color: red;

    color: #3d3d3d;

    color: rgb(186,11,98);

    color: rgba(186,11,98，0.5) 最后一个参数还可以控制透明度 0~1

背景属性 background

注意color是定义标签内容的颜色

background是定义标签下背景的颜色

div {

        width: 800px;  # 设置div块宽 px的意思是像素

        height: 800px;  # 设置div块高

        background-color: red;  # 背景颜色

        background-image: url("https://img2.baidu.com/it/u=167083063");  # 将图片作为背景

        background-image: url("666.png");  # 用本地的图片作为背景

        background-repeat: no-repeat;  # 背景图像不会重复

        background-repeat: repeat-x;  # 背景图像向水平方向重复

        background-repeat: repeat-y;  # 背景图像向垂直方向重复

        background-position: center center # 设置背景图像的起始位置;

        background: url("666.png") blue no-repeat center center;

	# 当多个属性名有相同的前缀 那么可以简写一次性完成

    }

CCS选择器 选择器优先级 选择器常见属性的更多相关文章

  1. css样式表和选择器的优先级以及position元素属性值的区别

    css样式表优先级 问题:当同一个HTML元素被不止一个样式定义时,会使用哪个样式呢? 答:一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字4拥有最高的优先权. 1.浏览器缺省 ...

  2. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性　　定位（position）z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

  3. CSS选择器的优先级及权重问题【CSS核心问题】及其它属性

    1.CSS选择器优先级:    !important >行间样式> id >class和属性选择器>标签选择器>通配符选择器        注意:[初级工程师水平] 2. ...

  4. python 46 css组合选择器 及优先级 、属性选择器

    一:css组合选择器 特性:每个选择器位可以为任意基本选择器或选择器组合 选择器分为以下几类: 群组选择器,子代(后代)选择器,相邻(兄弟)选择器,交集选择器,多类名选择器 1.群组选择器:    d ...

  5. CSS选择器以及优先级与匹配原理

    最常用的五类CSS选择器 准确而简洁的运用CSS选择器会达到非常好的效果.我们不必通篇给每一个元素定义类(class)或ID,通过合适的组织,可以用最简单的方法实现同样的效果.在实际工作中,最常用的选 ...

  6. 详解CSS选择器、优先级与匹配原理

    原文链接:http://polaris1119.javaeye.com/blog/764428 作为一个Web开发者,掌握必要的前台技术也是很重要的,特别是在遇到一些实际问题的时候.这里给大家列举一个 ...

  7. 转载：详解CSS选择器、优先级与匹配原

    转载网址:http://polaris1119.javaeye.com/blog/764428 文章就CSS选择器的优先级问题做了一些总结,严格来讲,选择器的种类可以分为三种:标签名选择器.类选择器和 ...

  8. CSS选择器、优先级和匹配原理

    作为一个Web开发者,掌握必要的前台技术也是很重要的,特别是在遇到一些实际问题的时候.这里给大家列举一个例子: 给一个p标签增加一个类(class),可是执行后该class中的有些属性并没有起作用.通 ...

  9. CSS系列------选择器和选择器的优先级

    1.1.基本选择器 通配符选择器(*)      通配符选择器的使用方法如下 *{margin:0px; padding:0px;} //*代表所有的 ID选择器(#) ID选择器的使用方式如下: * ...

随机推荐

  1. 2_JDBC

    一. 引言 1.1 如何操作数据库 使用客户端工具访问数据库, 需要手工建立连接, 输入用户名和密码登陆, 编写SQL语句, 点击执行, 查看操作结果(结果集或受行数影响) 1.2 实际开发中, 会采 ...

  2. Docker容器虚拟化

    Docker容器虚拟化 目录 Docker容器虚拟化 虚拟化网络 单节点容器间通信 不同节点容器间通信 虚拟化网络 Network Namespace 是 Linux 内核提供的功能,是实现网络虚拟化 ...

  3. 2. 单主机 Elasticsearch 双节点或多节点集群环境部署

    我已经买了一年的腾讯云轻量级服务器,并且安装好了ES,也做了一些系统配置,比如 修改vm.max_map_count.修改文件描述符数量 同时,也用ES安装目录下的 bin/elasticsearch ...

  4. 会话跟踪技术 - Cookie 和 Session 快速上手 + 登陆注册案例

    目录 1. 会话跟踪技术概述 2. Cookie 2.1 Cookie的概念和工作流程 2.2 Cookie的基本使用 2.3 Cookie的原理分析 2.4 Cookie的使用细节 2.4.1 Co ...

  5. 《Vue3.x+TypeScript实践指南》已出版

    转眼回长沙快2年了,图书本在去年就已经完稿,因为疫情,一直耽搁了,直到这个月才出版!疫情之下,众生皆苦!感觉每天都是吃饭.睡觉.上班.做核酸! 图书介绍 为了紧跟技术潮流,该书聚焦于当下火的Vue3和 ...

  6. 3.MongoDB系列之查询

    1. find简介 // 查询所有文档 db.users.find({}) // 查询指定条件文档 db.users.find({'name': 'shenjian'}) // 查询指定字段,1查询键 ...

  7. v-debounce-throttle是一个vue防抖节流指令

    v-debounce-throttle是一个vue防抖节流指令 简介 v-debounce-throttle是一个vue防抖节流指令,控制单一事件的触发频率.其核心是拦截组件元素的v-on绑定事件,采 ...

  8. Codeforces Global Round 18 B. And It's Non-Zero（按位前缀和）

    题目大意:求一段数(l到r)的按位与结果不为零需要删除中间元素的最小个数 思路:按位与使得结果不为0只要有某一位全是1即可,所以只要统计每一位1的个数,用总个数减去1的个数就是某一位0的个数 删除包含 ...

  9. Linux备份文件加“时间”命令

    好记性不如烂笔头,好用. date命令用于显示及设置系统的时间或日期,如何设置时间此处不再多说. date命令非常强大,可以将数据备份命令与date命令结合在一起使用,可以便捷的分辨出每个文件的备份时 ...

  10. Spring Cloud Loadbalancer

    Spring Cloud Loadbalancer---客户端负载均衡器 springcloud 2020.0.1 版本之后 删除了eureka中的ribbon,替代ribbon的是spring cl ...