CSS : Cascading Style Sheets
1、添加CSS方式
(1)、内联
通过元素的style属性直接加在元素上
例如:
CSS基础
(2)、页面
在页面中通过style标签添加样式
例如:
p{
color:red;font-weight:bold;font-size:30px;
}
(3)、外部文件
放在一个独立的文件中(如:all.css),通过link导入
例如:
说明:
优先级:(1)内联 --> (2)页面 --> (3)外部文件;
如果同一级,代码后面的样式覆盖前面的样式
2、CSS选择器
(1)元素选择器
根据HTML元素的名称应用样式,例如:
|-- 样式
div{
color:red;
}
|-- html代码
(2)ID选择器(优先于类选择器)
根据HTML元素的ID应用样式
|-- 样式
#div1{
color:red;
}
|-- html代码
(3)类选择器
|-- 样式
.content{
color:red;
}
|-- html代码
(4)层级(或叫后代)选择器
|-- 样式
div span{
color:red;
}
|-- html代码
span1
(5)分组选择器
通过逗号分隔,同时对多个元素应用样式
|-- 样式
#span1,#p1{
color:red;
}
|-- html代码
span1
span1
P1
(6)子元素选择器(直系子元素)
|-- 样式
div > span{
color:red;
}
|-- html代码
子元素1
子元素2
非直系子元素
(7)兄弟元素选择器(紧跟后面的兄弟元素)
|-- 样式
div + span{
color:red;
}
|-- html代码(只有span3会应用样式)
span1
span2
span3
span4
(8)属性选择器,例如:
A、等值匹配:
例子:查找name的值等于books的ul元素
ul[name="books"]{
color:red;
}
B、前匹配:^=
例子:查找所有id以love开头的元素
ul li[id^="love"]{
color:red;
}
C、后匹配:$=
例子:查找所有id以love结尾的元素
ul li[id$="love"]{
color:red;
}
D、模糊匹配:*=
例子:查找所有id包含love的元素
ul li[id*="love"]{
color:red;
}
标签:color,元素,基础,样式,html,red,选择器,css
来源: https://www.cnblogs.com/mgblog/p/12401903.html