1.CSS 初识
- Cascading Style Sheets :层叠样式表
- 层叠:多个样式可以作用在同一个html的元素上,同时生效
- 好处:
- 功能强大
- 将内容的展示和样式控制分离,降低耦合度
- 让分工协作更容易;提高开发效率
2.CSS与HTML的结合方式
2.1 内联样式(不推荐)
在style属性指定CSS代码
<div style="color: red">hello</div>
2.2 内部样式
在head标签内,定义style标签,style标签的标签体内容就是CSS代码
<head>
<meta charset="UTF-8">
<title>Title</title>
<ul type="disc"></ul>
<!--在head标签内,定义style标签,style标签的标签体内容就是CSS代码-->
<style>
div{
color: blue;
}
</style>
</head>
<body>
<div>hello</div>
</body>
2.3 外部样式
-
定义CSS资源文件
div{ color: red; }
-
在head标签内,定义link标签,引入外部的资源文件
<link rel="stylesheet" href="css/test.css">
2.4 注意
-
1、2、3中方式,CSS的作用域越来越大
-
1方式不常用。2、3方式常用
-
第3方式可以写为(不常用)
<style> @import "css/test.css"; </style>
3.CSS语法
3.1 格式
选择器{
属性名1:属性值1;
属性名2:属性值2;
......
}
- 选择器:赛选具有相同特征的元素
- 每一对属性需要用’’;’‘隔开,最优一对属性可以不加’’;’’
3.1 选择器
-
基本选择器
-
id选择器(优先级高):选择具体的id属性值的元素,建议在html页面中id值唯一
/* 语法: #id{ ...... } */ #div1{ color: red; }
<!-- 只有div1中的hello变红 --> <div id="div1">hello</div> <div id="div2">world</div>
-
类选择器(优先级中):选择具有相同的class属性值的元素
/* 语法: .clsss名称{ ...... } */ .cls1{ color: blue; }
<div class="cls1">aye</div>
-
元素选择器(优先级低):选择具有相同标签名称的元素
/* 语法: 标签名称{ ...... } */ div{ color: green; }
<!-- hello变红,world变绿 id选择器优先级高于元素选择器 --> <div id="div1">hello</div> <div >world</div>
-
-
扩展选择器
-
*****:选择所有元素
-
选择器1,选择器2:并集选择器
-
选择器1 选择器2:子选择器;选择 选择器1元素下的选择器2元素
div p{ color: red; }
<body> <div> <!-- 变红 --> <p>div下的p标签</p> </div> <!-- 不变 --> <p>p标签</p> </body>
-
选择器1(父) > 选择器2:父选择器,筛选选择器2的父选择器1
-
属性选择器:选择元素名称,属性名=属性值的元素
/* 选择imput标签下,type属性为text值的元素 */ input[type="text"]{ border: 1px solid; }
-
伪类选择器:选择一些元素具有的状态
/* 元素:状态{} 状态如: link:初始化状态 visited:被访问状态 active:正在访问状态 hover:鼠标悬浮(移动到)状态 */ a:link{ color: red; }
-
3.2 属性(常见,具体查看文档)
https://www.runoob.com/cssref/css-reference.html
3.2.1 字体、文本
- font-size:字体大小
- color:文本颜色
- text-align:对齐方式
- lind-height:行高
3.2.2 背景
- background:是复合属性
3.2.3 边框
- border:是复合属性,有boder-bottom等
3.2.4 尺寸
- width:宽度
- height:高度
4. 盒子模型
属性
- margin(外边距) - 清除边框外的区域,外边距是透明的。
- border(边框) - 围绕在内边距和内容外的边框。
- padding(内边距) - 清除内容周围的区域,内边距是透明的。
- content(内容) - 盒子的内容,显示文本和图像。
-
float:浮动属性,使元素向左或者向右移动,其他周围的元素也会重新1排列
- left
- right
-
clear:清除浮动
注意
- 默认情况下,内边距会影响盒子的大小。可以使用box-sizing:boder-box设置盒子属性,让width和height为最终盒子的大小