一、常见的CSS属性
属性 | 示例 | 描述 |
---|---|---|
color | color: red | 设置元素内容的颜色 |
text-align | text-align: center | 设置元素内容的对齐方式 |
font-size | font-size: 28px | 设置元素内容的文字大小 |
font-weight | font-weight: bold | 设置元素内容的文字粗细 |
background-color | background-color: red | 设置元素的背景颜色 |
圆角:border-radius: 20%;
圆 半径为100px
.circle{
width: 100px;
height: 100px;
background-color: #c51e1e;
border-radius: 100%;
}
文本相关属性
斜体:font-size: italic;
文字间隔:letter-spacing: 20px;
单词间距:word-spacing: 20px;
首行缩进:text-indent: 20px;
文本样式:text-decoration: none; 取消样式
text-decoration: overline; 上划线
text-decoration: underline; 下划线
text-decoration: line-through; 中划线
字体:font-family: "宋体","微软雅黑"; 设置多个属性值,直到识别到已安装的字体,若未识别到,则显示非衬线字体
非衬线字体(sans-serif):文字边缘未经过修饰,在电子设备上视觉效果良好 eg:幼圆
衬线字体(serif):文字边缘经过修饰,在纸张上视觉效果好 eg:宋体
二、颜色单位
-
CSS 中所有的颜色都是用RGB色域定义的,
-
表示RGB的方式:
-
关键字:red
-
HEX16进制表示法:#后跟3位数或6位数数字
数字用0-9以及大小写a~f字符组成,这些值映射到红绿蓝色彩通道
-
RGB值:由 rgb ()函数声明,共三个值,每个值范围在0-255,0为纯黑,255为纯白
-
HSL值:由 hsl ()函数声明,色度Hue值为0-360无单位数字;饱和度 Saturation 、亮度 lightness 值从0-100%表示。
-
/* 关键字 */
color: blueviolet;
/* 16进制 */
color: #555;
/* rgb函数,rgba:a代表饱和度,a的值在0-1*/
color: rgb(255,57,157);
color: rgba(255,57,157,0.6);
三、长度单位
一个尺寸是由长度+单位组成的
绝对长度:
-
px 一个像素的具体带下会根据设备的分辨率有所不同
-
计算机屏幕是由很多小点组成的,每一个点就是一个像素
-
其他尺寸单位,在经过浏览器计算后,都会变为px
相对长度:
-
%在不同的 CSS 属性中有不同的含义
-
em 相对于当前元素的字体大小(px)
-
rem 相对于根元素的大小
四、CSS 选择器
通配符 * 匹配页面上所有的元素
/* 通配符 */
*{
padding: 0;
margin: 0;
}
后代 :书写格式:祖先元素 后代元素{声明块}
/* 后代 */
section a{
color: black;
text-decoration: none;
background-color: cornflowerblue;
}
并集:同时选择多个选择器的内容,选择器之间用英文逗号 ,
/* 并集 */
a,p,h2{
color: gold;
font: xx-large;
background-color: indigo;
}
伪类选择器
/* 第一个子元素 */
section>p:first-child{
color: rgb(25, 241, 72);
background-color: cornflowerblue;
}
/* 最后一个子元素 */
section>p:last-child{
font-size: 150px;
}
a标签配套的伪类选择器
-
:link 访问前
-
/* 访问前 */ a:link{ color: mediumspringgreen; }
-
:visited 访问后
-
/* 访问后 */ a:visited{ color: rgb(153, 24, 228); }
-
:hover 鼠标移入
-
/* 鼠标移入 */ a:hover{ color: yellow; }
-
:active 访问时,点击
-
/* 点击 */ a:active{ color: royalblue; }
:nth-child() 匹配父元素的第N个子元素
-
括号里直接写数字
/* 括号里的数字为几,就表示为第几个子元素 */ p:nth-child(3){ color: chartreuse; }
-
括号里写odd或even
/* odd为奇数,even为偶数 */ p:nth-child(even){ color: rgb(19, 226, 191); }
-
括号里写公式an+b
/* an+b (n从0开始,a、b为整数) */ p:nth-child(2n+1){ color: rgb(255, 0, 0); }
:nth-of-type() 匹配父元素中指定类型元素的第N个子元素
-
括号里直接写数字
p:nth-of-type(2){ color: coral; }
-
括号里写odd或even
p:nth-of-type(odd){ color: coral; }
-
括号里写公式an+b
p:nth-of-type(2n){ color: coral; }
伪元素选择器
/* 伪元素选择器
元素名::after{
content:"在之前";
}*/
/*::before 在之前添加内容*/
p::before{
content: "在之前";
color: #488214;
}
/*::after 在之后添加*/
p::after{
content: "在之后";
color: #488214;
}
/*::first-letter 设置首字母的样式*/
p::first-letter{
color: #488214;
}
/*::first-line 设置第一行的样式*/
p::first-line{
color: #488214;
}
/*::selection 设置用户选中的内容的样式*/
h2::selection{
background-color: blueviolet;
color: chartreuse;
}
属性选择器
/* [target="_self"]{声明块} */
声明冲突:一个人元素的外观可能来自于多个规则的影响,这些规则共同作用于这个元素
这些规则的属性相同,值不同,就是声明冲突
div+p
层叠:
1、什么是层叠:
层叠是一种机制,用来解决CSS声明冲突、
2、层叠的过程:
-
比较优先级:优先级高的保留,反之淘汰
/* 重要声明 !important */ margin: 0px !important;
优先级从低到高:浏览器默认样式表中的声明;
用户样式表中的普通声明;
作者样式表中的普通声明;
作者样式表中的重要声明;
用户样式表中的重要声明;
-
比较特殊性:比较特殊性时,每一个冲突声明会生成4个数字分组(a,b,c,d)
规则适用范围越大,特殊性越低,适用范围越小,特殊性越高
特殊性从高到低:!important>行内>ID>类>元素>通配符
嵌入 id class 元素 a b c d style 1 0 0 0 id 0 1 0 0 class、属性、伪类 0 0 1 0 元素、伪类 0 0 0 1 通配符 0 !important 最高 -
比较源次序
继承
什么是继承:是指子元素会自动拥有父元素的某些CSS 属性
可继承的属性:color; font-size; font-weight; text-align
不可被继承的属性:background-color
继承具有传递性
强制继承:也叫显示继承,将CSS属性值设置为 inherit
原因:1.为了继承某些不可被继承的属性 2.为了继承已被声明的属性
属性值计算过程:
无属性值→确定声明值 →层叠冲突 →使用继承 →使用默认值→每个属性都有值
1. 确定声明值:
2. 层叠冲突:对样式表有冲突的声明使用层叠规则,确定CSS值
3. 使用继承:对仍然没有值的属性,若可以继承,继承父元素的属性
4. 使用默认值:对仍然没有值的属性,使用默认值。