标签：0004 知识点 color 元素 red css 选择器 CSS 属性
CSS：页面美化和布局控制001 CSS概念
Cascading Style Sheets：层叠样式表
层叠： 多个样式可以作用在同一个html元素上，并能同时生效
002 CSS的好处
1. 功能强大
2. 将内容展示和样式控制分离开
- 降低耦合性 即解耦
-
让分工协作更加容易
- 提高开发效率
003 CSS的使用
1. 内联方式：在标签内部使用style属性指定css代码(不推荐使用)
例如：<div style="color:red;">hello css</div>
2. 内部样式：在head标签内，定义style标签，style标签的标签体内容就是css代码
例如：
<html>
<head>
<style>
div{
color:red;
}
</style>
</head>
<body>
<div>hello css</div>
</body>
</html>
3. 外部样式：
1. 定义css的资源文件
2. 在head标签内，定义link标签，来引入外部的css资源文件
例如：
a.css
div{color:green;}
b.html
<html> <head> <link rel="stylesheet" href="a.css"/> </head> <body> <div>Hello css</div> </body> </html>
注意：
1. 这三种css的作用范围越来越大
2. 第一种方式不常用，常用的是第二种和第三种方式
3. 第三种方式可以写为下面的形式，不常用，知道就行
<style>
@import "a.css";
</style>
004 CSS语法格式
格式：
选择器{
属性名1：属性值1；
属性名2：属性值2
... ...
}
选择器：筛选具有相似特征的元素
注意：
每一对属性需要使用分号隔开(;)，最后一对属性不加分号
005 选择器
筛选具有相似特征的元素
5.1 基础选择器
1)id选择器:选择具体id属性的元素
语法： #id属性值{内容}
例如：
<style>
#div1{color:red;}
</style>
</head>
<body>
<div id="div1">创智播客</div>
注意：
1. 在一个页面中id值是唯一的
2）元素选择器:选择具有相同标签名称的元素
语法： 标签名称{}
例如：
<style>
#div{color:red;}
</style>
</head>
<body>
<div id="div1">创智播客</div>
<div>传智播客</div>
注意： id选择器的优先级高于元素选择器
3) 类选择器:选择具有相同的class属性值的元素
语法： .class属性值{}
例如：
<style>
.div02{color:red;}
</style>
</head>
<body>
<div class="div02">创智播客</div>
<div class="div02">传智播客</div>
注意：
1. 类选择器的优先级高于元素选择器的优先级
2. id选择器的优先级要高于类选择器的优先级
5.2 扩展选择器
1） 选择所有元素
语法： *{}
2） 并集选择器：选择器下的所有元素都会生效
语法： 选择器1,选择器2{}
3）子选择器：筛选选择器1下的选择器2中的所有元素
语法： 选择器1 选择器2{}
例如：
<style>
//子选择器
div p{
color:red;
}
</style>
</head>
<body>
<div>
<p>创智播客</p>
</div>
<p>传智播客</p>
4) 父选择器：筛选选择器2的父选择器1（即选择器2上一级的选择器1）中的内容
语法： 父选择器1>选择器2{}
例如：
<style>
//子选择器
div p{
color:red;
}
//父选择器
div>p{
border: 1px solid;
}
</style>
</head>
<body>
<div>
<p>创智播客</p>
</div>
<p>传智播客</p>
5) 属性选择器： 选择属性名称，属性名=属性值的元素
语法： 属性名称[属性名="属性值"]{}
例如：
<style>
input[type='text']{
border:5px solid
}
</style>
</head>
<body>
<input type="text">
<input type="password">
</body>
6) 伪类选择器：选择一些元素具有的状态
语法： 元素:状态{}
例如：<a>
状态：
link:初始化的状态
visited:被访问过的状态
active:正在访问的状态
hover:鼠标悬浮状态
代码
<style>
a:link{
color:pink;
}
a:active{
color:green;
}
a:hover{
color:yellow;
}
a:visited{
color:red;
}
</style>
</head>
<body>
<a href="#">黑马程序员</a>
</body>
006 CSS属性
1. 字体，文本
* font-size: 字体大小
* color: 文本颜色
* text-align： 对齐方式
* line_height： 行高
2. 背景:复合属性
* background: url("img/logo.jpg") no-repeat cneter;
3. 边框:复合属性
* border: 设置边框，复合边框
例如： border:1px solid red;
4. 尺寸
* width: 宽度
* height: 高度
5. 盒子模型:对页面布局的控制
* margin:外边距
* padding: 内边距
注意：
1) 默认情况下内边距会影响整个盒子的大小
2) box-sizing:border-box; 设置盒子的属性，让width和height就是最终盒子的大小
*float:浮动
* left
* right
例如：
<html>
<head>
<style>
.div1{
width:100px;
height:100px;
/*外边距：以该盒子为模型*/
/* margin:50px; */
}
.div2{
width:200px;
height:200px;
/*默认情况下内边距会影响整个盒子的大小 */
padding:50px;
/* 设置盒子的属性，让width和height就是最终盒子的大小 */
box-sizing:border-box;
}
</style>
</head>
<body>
<div class="div2">
<div class="div1"></div>
</div>
/body>
</html>
标签：0004,知识点,color,元素,red,css,选择器,CSS,属性 来源： https://www.cnblogs.com/Zhangzhiq/p/16301667.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。