前端基础（二）：CSS

（1）元素(标签)名[属性名]：选择含有指定属性的元素

（2）元素(标签)名[属性名=属性值]：选择含有指定属性名和属性值的元素

（3）元素(标签)名[属性名^=属性值] ：选择属性值以指定值开头的元素，比如 title^=“q”, 以q开头
                   值不必是完整单词！

（4）元素(标签)名[属性名$=属性值] ：选择属性值以指定值结尾的元素
                   值不必是完整单词！

（5）元素(标签)名[属性名*=属性值]：选择属性值包含指定值的元素
                   值不必是完整单词！

（6）元素(标签)名[属性名~=属性值]：用于选取属性值中包含指定词的元素。

这个指定词，是一个完整的独立的值！

（7）元素(标签)名[属性名｜=属性值]：用于选取带有指定值开头的属性值的元素.

会选择：属性等于属性值或以属性值- 开头的所有元素

举例1：

[title~="flower"] { border: 5px solid yellow; } 会匹配以下属性的元素：title="flower"、title="summer flower" 以及 title="flower new"，但不匹配：title="my-flower" 或 title="flowers"。即必须就是一个属性的独立的值，而不是属性值单词中的一部分。

举例2：

比如 *[lang|="en"] {color: red;}，上面这个规则会选择 lang 属性等于 en 或以 en- 开头的所有元素。因此，以下示例标记中的前三个元素将被选中，而不会选择后两个元素：

<p lang="en">Hello!</p>
<p lang="en-us">Greetings!</p>
<p lang="en-au">G'day!</p>
<p lang="fr">Bonjour!</p>
<p lang="cy-en">Jrooana!</p>

6.3.5 伪类选择器

（1）跟顺序相关的三种伪类

第一种：

:first-child 第一个子元素 (该元素是另一个元素的第一个子元素)

:last-child 最后一个子元素

:nth-child() 选中第n个子元素
   —括号里填数值，表示第几个子元素
   —n 表示0到正无穷，即所有的（n从0开始, 指定从某位开始时，可以相应的2n+数值）
   —2n 或 even, 表示选中偶数位的元素
   —2n+1 或 odd, 表示选中奇数位的元素

举例：ul > li: first-child{ }，        ul > li: nth-child(3){ }

第二种：

:first-of-type 第一个这个类型的子元素

:last-of-type 最后一个这个类型的子元素

:nth-of-type() 选中第n个这个类型的子元素
   —括号里填数值，表示第几个子元素
   —n 表示0到正无穷，即所有的（n从0开始, 指定从某位开始时，可以相应的2n+数值）
   —2n 或 even, 表示选中偶数位的元素
   —2n+1 或 odd, 表示选中奇数位的元素

举例：ul > li: first-of-type{ }，        ul > li: nth-of-type(3){ }

第三种：

not (selector)：选择每个非 <selector> 元素的元素。

比如：Ul > li: not(:nth-of-type(3))

（2）a标签的伪类

作用：根据访问者与该链接的交互方式，将链接设置成四种不同的状态。

四种状态：

a:link{} 用来表示没有访问过的链接

a:visited{} 用来表示访问过的链接（访问过的链接样式，不允许设置尺寸，为了保护隐私）

a:hover{} 表示鼠标悬停链接/表示鼠标移入的状态

a:active{} 表示已选择的链接/表示鼠标点击

不一定是a标签，也可用于其他标签，比如div. 把鼠标悬停到 <div> 元素以显示 <p> 元素（类似工具提示的效果）

注意：

a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！

a:active 必须在 CSS 定义中的 a:hover 之后才能生效！

伪类名称对大小写不敏感。

6.3.6 伪元素选择器

（1）p::first-letter{}：只适用于块级元素。

（2） p::first-line{}：只能应用于块级元素。

（3）p::before{}：可用于在元素内容之前插入一些内容。

（4）p::after{}：页面上，before和after的内容不能被选中。

（5）p::selection：选择用户选择的元素部分。

6.4 样式的继承

我们为一个元素设置样式元素的同时，也会应用到它的后代元素上。

即，继承是发生在祖先和后代元素之间的，并不是只有子元素继承。

所以可以将一些通用的样式统一设置到共同的祖先元素上。

极个别属性不能被继承，比如背景相关的，布局相关的。

6.5 选择器的权重

（1）样式的冲突：当我们通过不同的选择器，选中相同的元素，并且为相同的元素设置不同的样式时，这时候样式就发生了冲突。

（2）发生样式冲突时，需要根据选择器的权重来决定如何显示

内联样式（标签里style=""）：1000

id选择器：0100

类和伪类选择器：0010

元素选择器：0001

通配选择器：0000

继承的样式：没有优先级

（3）注意：

1）比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示（分组选择器是单独计算的）

2）选择器的累加不会超过其最大的数量级，比如，类选择器再高也不会超过id选择器。

3）如果优先级计算后相同，此时则优先使用靠下的样式。

4）如果样式中加了！important, 那这个就是最高的，超过内联样式。

举例：

一个元素，11个类，数值上看时超过了id的值，但它停到了它这个阶段，不管数值加起来是多少，都不能超过id选择器

样式的冲突和覆盖，只是覆盖重复的那一项，比如颜色而已，宽高没有冲突的话，宽高是按照一些存在的设置去实现

6.6 一些简单的样式(单位，颜色，字体，布局)

（1）单位

像素 10px
屏幕(显示器)上的一个个像素点。
不同屏幕的像素大小是不一样的。单个像素越小，屏幕越清晰（同样的面积里，像素点越多，越清晰）
所以同样的200px下不同设备显示的效果是不一样
工具： FastStone Capture （还可以取色）/ QQ截图, 可查看以像素为单位的尺寸信息

百分比 50%
设置为父元素属性的百分比
可以根据父元素的变化情况，跟着自动调节
通常是用在子元素上的，不要加在父元素上，不然它就根据body来实现了

em 10em
em相对于当前元素字体的大小来计算的
比如 font-size是16px，我们设置了10em, 那这里10em的效果，就相当于16*10px=160px

rem
rem相对于根元素（html标签中的font-size尺寸）的字体大小来计算的

（2）颜色

英文名称： red, green…

RGB（可小写）
通过三种颜色不同的浓度，来调配处不同的颜色（red, green, blue）。每种颜色的值在0-255之间。语法：RGB(红色，绿色，蓝色)。比如RGB(255,0,0). //如果都是0，则是黑色。如果都是255，其实就是个白色

RGBA
在RGB的基础上增加了一个属性，表示不透明度。比如rgba(255, 123, 33, .15). 0代表完全透明，1代表都不透明， 0.5代表半透明

十六进制的RGB
语法： #红色绿色蓝色
颜色浓度通过00-ff设置
例如#ff0000, #00FF00.
如果颜色两位两位重复，可以进行简写。比如#00ff00，则可以写成#0f0.

我们经常用的颜色 #bfa, 表示豆沙绿

取色工具：FastStone Capture，PPT，QQ截图

（3）字体

字体相关的样式：

color, font-size, font-family字体族, line-height行高, border字体框

text-align文本的水平对齐

vertical-align元素垂直对齐的方式

背景相关的样式：

background-color：背景颜色

backgroup-image：背景图片，

background-repeat：背景的重复方式

background-position：背景图片的位置

（4）布局

6.7 盒模型

（1）盒模型从内到外有四个区：

内容区（content）：盒子的内容，显示文本和图像。

内边距（padding）：清除内容周围的区域，内边距是透明的。

边框（border）：围绕在内边距和内容外的边框。

外边距（margin）：清除边框外的区域，外边距是透明的。

（2）内容区（content）

元素中所有的子元素和文本内容都是在内容区中排列的。

内容区的大小是由width和height两个元素来设定的。

（3）内边距（padding）
样式里：

padding-top

padding-right

padding-bottom

paddig-left

举例：

padding: 50px 60px 70px 80px; //可设1-4个值，类似下方

和border-with类似，也可以通过border-xxx-color来分别设置四个内边距。

背景颜色会延伸到内边距上。

（4）边框（border）

边框属于盒子的边缘，边框里面属于盒子内部。出了边框，就是盒子外部。

最常用的形式: border: 10px red solid; //顺序可换

要设置边框，至少需要设置三个样式属性
border-width
Border-width: 默认是3个像素（每一条），可以指定上下左右四个方向的边框宽度。
四个值：上右下左
三个值：上左右下
两个值：上下左右
或者以下四个方式，分别设置四个边框的宽度：
border-top-width:
border-bottom-width:
border-left-width:
border-right-width:

border-color
如果设置了border-color，则用设置的。如果没有设置，就用前景色的颜色。
和border-with类似，也可以通过border-xxx-color来分别设置四个边框的颜色。

border-style
和border-with类似，也可以通过border-xxx-style来分别设置四个边框的类型。
类型有： solid, dotted…

（5）外边距（margin）

样式里：

常用写法： margin: 30px；

Margin-top: 30px； //移动的是自己

Margin-left: 30px； //移动的是自己

Margin-bottom: 30px； //移动的是旁边的其他元素。如果上下有几个元素，都设置了上下外边距，它们的值不会增加，即存在外边距的折叠（以大的为主）。

Margin-right: 30px； //移动的是旁边的其他元素。一般不写，浏览器会根据实际总宽度和已占用宽度的情况，去调整

（6）最后，整个盒子模型到底占了多少空间，计算方法如下：

Margin-left + border-left + padding-left+ width + padding-right + border-right+margin-right

—> 相加起来，也等于父元素的宽度

出处不详，经久不息

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端基础（二）：CSS

目录6. CSS6.1 三种样式6.1.1 第一种：行内样式，内联样式 6.1.2 第二种：内部样式6.1.3 第三种：外部样式表6.2 CSS语法6.2.1 注释 6.2.2 选择器{声明块}6.3 CSS 选择器6.3.1 常用选择器6.3.2 复合选择器6.3.3 关系选择器6.3.4 属性选择器6.3.5 伪类选择器6.3.6 伪元素选择器6.4 样式的继承 6.5 选择器的权重6.6...
复制链接

扫一扫