css
1、什么是css
css(cascading style sheets)层叠样式表
HTML是用来搭建网页的布局结构
css是用来添加HTML的外观样式
2、css的书写方式
a、行内样式:直接写在行内
<p style="color:red;"></p>
单标记:<元素 style="属性名:属性值;" />
双标记:<元素 style="属性名:属性值;" />
b、内联样式:在head中书写
<style>
选择器{
属性名:属性值;
属性名:属性值;
属性名:属性值;
}
</style>
c、外链样式表
1、新建一个css文件
2、在<head></head>标签里引入css文件
3、在xx.css文件里编写样式
选择器{
属性名:属性值;
属性名:属性值;
属性名:属性值;
}
3、选择器
(1)*:通配选择器 自动匹配HTML里面的所有元素
语法: *{
属性:属性值;
属性:属性值;
...
}
(2) 元素选择器 例如:p、span、h1-h6...
语法: 元素名称{
属性:属性值;
属性:属性值;
...
}
(3)类选择器: class="类名"
语法: .类名{
属性:属性值;
属性:属性值;
...
}
(4)id选择器: id="id名"
语法: #id名{
属性:属性值;
属性:属性值;
...
}
(5)群组选择器:用 , 隔开
语法: p、h2、span{
属性:属性值;
属性:属性值;
...
}
(6)自类选择器:用空格隔开
语法: div span{
属性:属性值;
属性:属性值;
...
}
(7)为类选择器
:hover
:link
:visitef
:active
4、选择器优先级
id选择器>类>元素>通配
1、什么是css
css(cascading style sheets)层叠样式表
HTML是用来搭建网页的布局结构
css是用来添加HTML的外观样式
2、css的书写方式
a、行内样式:直接写在行内
<p style="color:red;"></p>
单标记:<元素 style="属性名:属性值;" />
双标记:<元素 style="属性名:属性值;" />
b、内联样式:在head中书写
<style>
选择器{
属性名:属性值;
属性名:属性值;
属性名:属性值;
}
</style>
c、外链样式表
1、新建一个css文件
2、在<head></head>标签里引入css文件
3、在xx.css文件里编写样式
选择器{
属性名:属性值;
属性名:属性值;
属性名:属性值;
}
3、选择器
(1)*:通配选择器 自动匹配HTML里面的所有元素
语法: *{
属性:属性值;
属性:属性值;
...
}
(2) 元素选择器 例如:p、span、h1-h6...
语法: 元素名称{
属性:属性值;
属性:属性值;
...
}
(3)类选择器: class="类名"
语法: .类名{
属性:属性值;
属性:属性值;
...
}
(4)id选择器: id="id名"
语法: #id名{
属性:属性值;
属性:属性值;
...
}
(5)群组选择器:用 , 隔开
语法: p、h2、span{
属性:属性值;
属性:属性值;
...
}
(6)自类选择器:用空格隔开
语法: div span{
属性:属性值;
属性:属性值;
...
}
(7)为类选择器
:hover
:link
:visitef
:active
4、选择器优先级
id选择器>类>元素>通配