目录
css: 层叠样式表
行内样式
<div style='color:red;'>mjj</div>
内嵌式
在head标签内部书写style
<style>/*css代码*/#box{ background-color: greenyellow; }</style>外接式
<link href='css/index.css' rel='stylesheet'>
三种引入方式的优先级:
1.行内样式>内嵌式和外接式,2.内嵌和外接要看谁在后面，在后面的优先级高1.id选择器
特定属性的元素（标签）、唯一的
语法： #xxx
2.类选择器
可以重复归类，类也可以设置多个
语法： .xxx
<style>.box{width:200px;height:200px;background-color:yellow;} <!--单独设置 类1 中某个样式与 类2 不一样-->.active{border-radius: 20四级有什么用0px; <!--设置盒子边框-->}</style><div class='box active'></div> <!--类1--><div class='box'></div> <!--类2--><div class='box'></div> <!--类2-->3.标签选择器
标签选择器有：div{} 、p{} 、ul 、ol …
<head> <meta chart="utf-8"> <title>title</title> <style> a{ /*设置文本修饰*/ text-decoration: none; } input{ border:none; outline:none; } #ur{ border: 1px solid #555; height: 60px; font-size: 20px; padding: 0 10px; } .box { width: 200px; height: 200px; 成考和自考的区别 background-color: yellow; } .active { border-radius: 4px; } #box{ becou color: red; } div{ border:1px solid #000; } </style></head><body><div class='box active' id="box">wusir</div><hr><div class='box'></div><hr><div class='box'></div><a href="">百度一下</a><input type="text" id="ur"></body>1.后代选择器
语法：
/*用空格连接*/div p{color: red;}2.子代选择器
语法：
/*用>连接*/div>p{color: red;}3.组合选择器
常用于重置样式
语法：
/*用,连接*/div,p,body,html,ul,ol....{padding: 0;margin: 0;}input,textarea{ border:none; outline: 0; }如何重置网页样式？
html,body,p,ul,ol{ margin: 0; padding: 0;}/*通配符选择器 */*{ margin: 0; padding: 0;}a{ text-decoration: none;}/*清除input和textarea标签的默认边框和外线*/input,textarea{ border: none; outline: none;}4.交集选择器
span.active
语法：
div.active{}对于a标签，如果想设置a标签的样式，要作用于a标签上，对于继承性来说，a标签不起作用联想和想象的
“爱恨准则” — love hate ：l – link 、v – visited 、h – hover 、a – active
/*love hate*//*a标签没有被访问时候设置的属性*/a:link{ /*color: red;*/}/*a标签被访问过后设置的属性*/a:visited{ color:yellow;}/*a标签被鼠标悬浮时设置的属性*/a:hover{ color: deeppink;}/*a标签被摁住的时候设置的属性*/a:active{ color: deepskyblue;}<style> input[type='text']{ background-color: red; } input[type='checkbox']{ } input[type='submit']{ }</style><style> /*设置内容中的第一个文字*/ p::first-letter{ color: red; font-size: 20px; font-weight: bold; } /*在内容前加一个@*/ p::before{ content:'@'; } /*::after是解决浮动布局常用的一种方法*/ /*在内容后面加一个$*/ p::after{ /*通过伪元素添加的内容为行内元素*/ content:'$'; }</style>注意：
1.通过伪元素添加的内容为行内元素2.::after是解决浮动布局常用的一种方法3.1个’:’是伪类选择器，2个’:’是伪元素选择器1.盒子模型的属性及含义：
width: 内容的宽度
height：内容的高度
padding：内边距（又叫内填充），盒子的border到内容的距离
1.单个属性分别设置不同方向的padding
padding-top 顶部填充的距离padding-right 右侧填充的距离padding-bottom 底部填充的距离padding-left 左侧填充的距离
2.综合属性，多个属性用空格隔开。
/*综合设置：四个方向的内边距为：*/padding: 20px;/*盒子的上下内边距设置为第一个数值，左右内边距设置第二个数值*//*上 左右 下*/padding: 0 20px 30px;/*上 右 下 左*/padding: 10px 20px 30px 40px;
border：盒子的边框
boder边框三要素：粗细 、线性样式 、颜色
1.按照三要素书写borderborder-width:3px; /*边框四边线的粗细*/border-style:solid; /*边框线样式*/border-color:red; /*边框线颜色*//*上面三句代码相当于一句代码：*/border:3px solid red;/*同样,也可以分别设置边框四个方向的粗细 线性样式 颜色,跟padding的四个方向一样。*//*上下5px 左右10px*/border-width:5px 10px;/*上：实线 右：点状线 下：双线 左：虚线*/border-style: solid dotted double dashed;/*上：红色 左右：绿色 下：黄色*/border-color: red green yellow;2.按照方向划分
/*boder的顶部边框*/border-top-width: 10px;border-top-color: red;border-top-style: solid;/*可以简写成*/border-top: 10px solid red;/*boder的右侧边框*/border-right-width: 10px;border-right-color: red;border-right-style: solid;/*可以简写成*/border-right: 10px solid red;/*boder的底部边框*/border-bottom-width: 10px;border-bottom-color: red;border-bottom-style: solid;/*可以简写成*/border-bottom: 10px solid red;/*boder的左侧边框*/border-left-width: 10px;border-left-color: red;border-left-style:solid;/*可以简写成*/border-left: 10px solid red;
3.清除默认边框
清除某些标签默认的边框 ：border:none; 或者 border:0;
清除某些标签默认的外边框 ：outline: none; 或者 border:0;
4.边框属性
1.设置为圆角或者圆
语法： border-radius:20px;
<style> #box{ width: 300px; height: 300px; background-color: red; /*border-radius: 50%;*/ border-radius: 4px; border: 3px solid blue; } #box:hover{ background-color: #000; } </style>除了同时设置四个圆角以外，还可以单独对每个角进行设置。对应四个角，css3提供四个单独的属性：
border-top-left-radiusborder-top-right-radiusborder-bottom-right-radiusborder-bottom-left-radius这四个属性都可以同时设置1到2个值。如果设置1个值，表示水平半径与垂直半径相等。如果设置2个值，第一个值表示水平半径，第二个值表示垂直半径。
2.设置阴影效果
语法：box-shadow: h-shadow v-shadow blur color int;
h-shadow 水平阴影的位置、距离
v-shadow 垂直阴影的位置、距离
blur 模糊距离、程度
color 阴影的颜色
int 将外部阴影 (outt，默认值) 改为内部阴影。
<style> .box{ width: 200px; height: 200px; background-color: #000; margin: 100px auto; position: relative; transition: all .2s linear; } .box:hover{ top: -2px; box-shadow: 0 0 20px red; }</style>margin：盒子的外边距，一个盒子到另一个盒子的距离。
水平方湖北中小学开学确定延期向的外边距
/*左外边距*/margin-left: 30px;/*右外边距*/margin-right: 20px;
垂直方向外边距
margin在水平方向上不会出现问题，但在垂直方向上会出现外边距合并（或重叠）现象，这种现象叫做塌陷问题，会以设置的最大的magrin距离为基准。
如何避免出现这种问题呢？
为了避免出现塌陷问题，只需要设置一个盒子的一个方向的margin即可。/*顶部外边距*/margin-top:50px;/*底部外边距*/margin-bottom:30px;
也可以综合设置水平与垂直方向的外边距
/*水平居中*/margin:0 auto;
2.盒子模型图
本文发布于:2023-04-07 04:45:20，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/dc548e3da654daa09de4f00c1c4d34b1.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：css — 选择器、盒子模型.doc
本文 PDF 下载地址：css — 选择器、盒子模型.pdf
| 留言与评论（共有 0 条评论） |
