选择器-基础选择器
<title>选择器</title>
<style>
#div1{
color: red;
}
#class1{
color: gray;
}
</style>
</head>
<body>
<!-- 基础选择器：
1.id选择器：选择具体的id属性值的元素，建议在一个html页面中id值唯一
语法：#id属性值{}
2.元素选择器：选择具有相同标签名称的元素
语法：标签名称{}
注意：id选择器优先级高于元素选择器
3.类选择器：选择具有相同的class属性值的元素
语法：class属性值{}
注意：类选择器优先级高于元素选择器
-->
<div id="div1">传智播客</div>
<div id="class1">传智</div>
<p class="cls1">博客</p>
选择器-扩展选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>扩展选择器</title>
<style>
/*<!-- div下的p标签 -->*/
div p{
/*红色*/
color:red;
}
/*p标签之外的div盒子*/
div > p {
/*红线，1px*/
border: 1px solid;
}
/*input标签，text*/
input[type='text']{
/*5 大小 实现*/
border: 5px solid;
}
/*初始化状态*/
a:link{
/*粉色*/
color: pink;
}
/*鼠标悬浮*/
a:hover{
/*绿色*/
color: green;
}
/*正在访问状态*/
a:active{
/*黄色*/
color: yellow;
}
/*被访问郭的状态*/
a:visited{
/*红色*/
color: red;
}
</style>
</head>
<body>
<!--
扩展选择器：
1. 选择所有元素：
* 语法： *{}
2. 并集选择器：
* 选择器1,选择器2{}
3. 子选择器：筛选选择器1元素下的选择器2元素
* 语法： 选择器1 选择器2{}
4. 父选择器：筛选选择器2的父元素选择器1
* 语法： 选择器1 > 选择器2{}
5. 属性选择器：选择元素名称，属性名=属性值的元素
* 语法： 元素名称[属性名="属性值"]{}
6. 伪类选择器：选择一些元素具有的状态
* 语法： 元素:状态{}
* 如： <a>
* 状态：
* link：初始化的状态
* visited：被访问过的状态
* active：正在访问状态
* hover：鼠标悬浮状态
-->
<!--div盒子-->
<div>
<!-- p标签-->
<p>传智播客</p>
</div>
<!--p标签-->
<p>黑马程序员</p>
<!-- div盒子-->
<div>aaa</div>
<!-- input标签-->
<input type="text" >
<!-- input标签-->
<input type="password" >
<!-- 超链接-->
<a href="#">黑马程序员</a>
</body>
</html>
选择器-CSS属性
属性
字体、文本
font-size：字体大小
color：文本颜色
text-align：对其方式
line-height：行高
背景
background：
边框
border：设置边框，符合属性
尺寸
width：宽度
height：高度
盒子模型：控制布局
margin：外边距
padding：内边距
默认情况下内边距会影响整个盒子的大小
box-sizing: border-box; 设置盒子的属性，让width和height就是最终盒子的大小
float：浮动
left：左浮动
right：右浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css属性</title>
<style>
/*<!-- div盒子-->*/
div{
/*边框1，实线，红色*/
border: 1px solid red;
/*宽，100*/
width: 100px;
}
/*id为div1的盒子*/
.div1{
/*宽100*/
width: 100px;
/*高100*/
height: 100px;
/*外边距*/
/* margin: 50px; */
}
/*id为div2的盒子*/
.div2{
/*宽200*/
width: 200px;
/*高200*/
height: 200px;
/*内边距50*/
padding: 50px;
/*设置盒子的属性，让width和height就是最终盒子的大小 */
box-sizing: border-box;
}
/*di为div3的盒子*/
.div3{
/*左浮动*/
float: left;
}
/*di为div4的盒子*/
.div4{
/*左浮动*/
float: left;
}
/*di为div5的盒子*/
.div5{
/*右浮动*/
float: right;
}
</style>
</head>
<body>
<!-- div盒子设置id为div2-->
<div class="div2">
<!-- div盒子设置id为div1-->
<div class="div1"></div>
</div>
<!-- div盒子设置id为div3-->
<div class="div3">aaaa</div>
<!-- div盒子设置id为div4-->
<div class="div4">bbbbb</div>
<!-- div盒子设置id为div5-->
<div class="div5">cccc</div>
</body>
</html>
标签：盒子,color,height,width,选择器,CSS,属性 From： https://www.cnblogs.com/yuzong/p/16815428.html