D6、CSS
作者:互联网
css:页面美化和布局控制、
概念: Cascading style Sheets层叠样式表
层叠:多个样式可以作用在同一个html的元素上,同时生效,
好处:1,功能强大;2,将内容展示和样式控制分离降低耦合度。解耦、让分工协作更容易、提高开发效率
Css的使用: css与html结合方式
1.内联样式
在标签内使用style属性指定css代码
如: <div style="color:red; ">hello css</div>
2,内部样式
在head标签内,定义style标签, style标签的标签体内容就是css代码
如:
<style>
div{
color:blue;
}</style>
<div> hello css <div>
3,外部样式
1,定义css资源文件。
2,在head标签内,定义link标签,引入外部的资源文件,如:
a.css文件:
divi{
color:green;
<link rel="stylesheet" href="css/a.css">
<div>hello css</div>
<div>hello css</div>
注意: 1,2,3种方式css作用范围越来越大
1方式不常用,后期常用2,3
3种格式可以写为:<style> @import "css/a.css";</style>
4. css语法:
格式
选择器{
属性名1:属性值1;
属性名2:属性值2;
.....
}
选择器:筛选具有相似特征的元素
注意:每一对属性需要使用;隔开,最后一对属性可以不加;
5、选择器:筛选具有相似特征的元素
分类:
1,基础选择器
1. id选择器:选择具体的id属性值的元素.建议在一个html页面中id值唯一
语法: #id属性值()
2,元素选择器:选择具有相同标签名称的元素
语法:标签名称{}*
注意:id选择器优先级高于元素选择器
3,类选择器:选择具有相同的class属性值的元素。
语法: .class属性值(}注意:类选择器选择器优先级高于元素选择器
2.扩展选择器
1.选择所有元素
*语法: *{}
2.并集选择器:*选择器
1,选择器2{}
3.子选择器:筛选选择器1元素下的选择器2元素
语法: 选择器1 选择器2{}
4·子选择器:筛选选择器2的元素选择器
语法: 选择器1 >选择器2{}
5·属性选择器:选择元素名称,属性名-属性值的元素
语法: 元素名称[属性名="属性值"]{}
6.伪类选择器:选择一些元素具有的状态
语法:元素:状态{}
如: <a>
状态:
link :初始化的状态
visited:被访问过的状态
active:正在访问状态
hover :鼠标悬浮状态
6.属性
1,字体、文本
font-size :字体大小
color :文本颜色
text-align :对其方式
line-height :行高
2,背景
background
3,边框
border :设置边框,符合属性
4,尺寸
width :宽度
height :高度
5,盒子模型:控制布局
margin :外边距
padding :内边距
默认情况下内边距会影响整个盒子的大小
box-sizing: border-box; 设置盒子的属性, 让width和height就是最终盒子的大小'
float:浮动
left
right
标签:标签,元素,语法,css,D6,选择器,CSS,属性 来源: https://blog.csdn.net/qq_41996426/article/details/120689802