云南省公务员考试答案,军营午时花,嫣部落
目录
css: 层叠样式表
行内样式
<div style='color:red;'>mjj</div>
内嵌式
在head标签内部书写style
<style> /*css代码*/ #box{ background-color: greenyellow; } </style>
外接式
<link href='css/index.css' rel='stylesheet'>
三种引入方式的优先级:
1.id选择器
特定属性的元素(标签)、唯一的
语法: #xxx
2.类选择器
可以重复归类,类也可以设置多个
语法: .xxx
<style> .box{ width:200px; height:200px; background-color:yellow; } <!--单独设置 类1 中某个样式与 类2 不一样--> .active{ border-radius: 200px; <!--设置盒子边框--> } </style> <div class='box active'></div> <!--类1--> <div class='box'></div> <!--类2--> <div class='box'></div> <!--类2-->
3.标签选择器
标签选择器有:div{} 、p{} 、ul 、ol ...
<head> <meta charset="utf-8"> <title>title</title> <style> a{ /*设置文本修饰*/ text-decoration: none; } input{ border:none; outline:none; } #user{ 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{ 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="user"> </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.盒子模型的属性及含义:
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边框三要素:粗细 、线性样式 、颜色
border-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;
/*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提供四个单独的属性:
这四个属性都可以同时设置1到2个值。如果设置1个值,表示水平半径与垂直半径相等。如果设置2个值,第一个值表示水平半径,第二个值表示垂直半径。
2.设置阴影效果
语法:box-shadow: h-shadow v-shadow blur color inset;
h-shadow 水平阴影的位置、距离
v-shadow 垂直阴影的位置、距离
blur 模糊距离、程度
color 阴影的颜色
inset 将外部阴影 (outset,默认值) 改为内部阴影。
<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-top:50px; /*底部外边距*/ margin-bottom:30px;
也可以综合设置水平与垂直方向的外边距
/*水平居中*/ margin:0 auto;
2.盒子模型图
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
css3 flex布局 justify-content:space-between 最后一行左对齐
网友评论