选择器-基础选择器
<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