CSS：页面美化和布局控制
1.概念：Cascading Style Sheets 层叠样式表
- 层叠：多个样式可以作用在同一个html的元素上，同时生效
2.好处：
- 1.功能强大
- 2.将内容展示和样式控制分离
- 降低耦合度。解耦
- 让分工协作更容易
- 提高开发效率
CSS的使用：CSS与html结合方式
1.内联样式
- 在标签内使用style属性指定css代码
- 如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div style="color: red;">hello css</div>
</body>
</html>
2.内部样式
- 在head标签内，定义style标签，style标签的标签体内容就是css代码
- 如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
color: aqua;
size: a5;
}
</style>
</head>
<body>
<div>啦啦啦啦</div>
</body>
</html>
3.外部样式
- 1.定义css资源文件
- 2.在head标签内，定义link标签，引入外部的资源文件
- 如：
css:
div{
color: blue;
}
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/a.css"/>
</head>
<body>
<div>hello css</div>
</body>
</html>
展示效果：
- 注意：
- 1，2，3种方式，css作用范围越来越大
- 1方式不常用，后期常用2，3
CSS语法：
-
格式：
选择器 {
属性名1：属性值1；
属性名2：属性值2；
...
} -
选择器：筛选具有相似特征的元素
-
注意：
- 每一对属性需要使用；隔开，最后一对属性可以不加；
选择器：筛选具有相似特征的元素
- 分类：
- 1.基础选择器
- 1.id选择器：选择器具体的id属性值的元素，建议在一个html页面种id值唯一
- 语法：#id属性值{}
- 2.元素选择器：选择具有相同标签名称的元素
- 语法：标签名称{}
- 注意：id选择器优先级高于元素选择器
- 3.类选择器：选择具有相同的class属性值的元素。
- 语法：.class属性值{}
- 类选择器优先级高于元素选择器
- 1.id选择器：选择器具体的id属性值的元素，建议在一个html页面种id值唯一
- 2.扩展选择器
- 1.选择所有元素：
- 语法：*{}
- 2.并集选择器：
- 选择器1，选择器2{}
- 3.子选择器：筛选选择器1元素下的选择器2元素
- 语法：选择器1 选择器2{}
- 4.父选择器：筛选选择器2的父元素下的选择器1
- 语法：选择器1 > 选择器2{}
- 5.属性选择器：选择元素名称，属性名==属性值的元素
- 1.元素名称[属性名="属性值"]{}
- 6.伪类选择器：选择一些元素具有的状态
- 语法：元素：状态{}
- 如：a
- 状态：
- link：初始化的状态
- visited：被访问过的状态
- active：正在访问的状态
- hover：鼠标悬浮状态
- 状态：
- 1.选择所有元素：
- 1.基础选择器
属性：
1.字体，文本
- font-size：字体大小
- color：文本颜色
- text-align：对其方式
- line-height：行高
2.背景
- background：复合属性。设置对象的背景特性
3.边框 - border：设置边框，符合属性
4.尺寸 - wigth：宽度
- height：高度
5.盒子模型 - margin:外编剧
- padding：内边框
- 默认情况下内边距会影响整个盒子的大小
- box-sizing：border-box；设置盒子的属性，让width和height就是最终盒子的大小
- float：浮动
- left
- right
标签：标签,元素,语法,CSS,选择器,css,属性 来源： https://www.cnblogs.com/ailhy/p/16543430.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。