CSS样式基本认识
一:CSS概括
CSS(Cascading Style Sheets):层叠样式表,是一种用来表现HTML或者XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不仅可以静态的修饰网页,还可以配合各种脚本语言动态的对网页各元素进行格式化
CSS能够对网页中元素位置的排版进行像素精确控制,支持几乎所有字体字号样式,拥有对网页对象和模型样式编辑的能力
二:基本选择器
CSS样式格式化放在Style标签下
1.标签选择器
选择页面中某一个类型的标签
/* 1.标签选择器(选择页面中某一个同类型的标签) */
p{
color:blue;
font-size: 18px;
}
2.类别选择器
选择页面中具有相同类别class标记的元素,class指定的标签可以是多个
/* 2.类别选择器(用于选择页面中具有相同类别class的元素) */
.name{
color: brown;
}
3.id选择器
选择页面指定的id的元素,id值是唯一的
/* 3.id选择器(选择页面中指定id的元素,id为唯一) */
#p3{
color: gray;
font-size: 30px;
}
4.基本选择器的优先级:权重
id选择器(100)>类别选择器(10)>标签选择器(1)
三:复合选择器
1.后代选择器
选择其嵌套在内部的后代标签 用空格分隔
<li><a href="#" >列表一</a></li>
/* 1.后代选择器(选择其嵌套在内部的标签) */
li a{
color: red;
/* 1.1去除超链接下划线 */
text-decoration: none;
}
2.并集选择器
或者的关系,表示同时格式化指定的所有标签 用==","分隔各个标签==
span,a{
color: mediumvioletred;
font-size: 30px;
}
3.交集选择器
并且的关系,表示标签是这种类型下的选择器类型,不需要分隔符分隔各个元素
/* 3.交集选择器 此时权重是1+10*/
li#t{
color: fuchsia;
}
.t{/*权重为10*/
color: black;
}
4.标签权重
样式选择器的权重高低代表谁在首层显示,谁被覆盖显示,如果权重相同,那么后者覆盖前者
普通标签的权重值:1
类别标签的权重值:10
id选择器的权重值:100
复合选择器的权重是根据使用的类别相加的权重
四:属性选择器
这种选择器有点类似于正则表达式的筛选作用,作用是在指定标签下的指定属性进行指定条件的查询格式化样式
<body>
用户:<input type="text" name="username" id=""><br>
密码:<input type="password" name="passname" id=""><br>
性别:<input type="text" name="sex" id=""><br>
<input type="button" value="buttom"><br>
</body>
1.属性选择器之----包含:" * "
以 *= 查找包含指定条件的标签内容进行格式化样式
/* 1.选择指定属性中包含有指定字符的元素 */
input[name*=a]{
background-color: yellow;
color: red;
}
2.属性选择器之----开头: " ^ "
以 ^= 查找指定条件开头的标签名进行格式化样式
/* 2.选择指定属性以指定字符开头的字符的元素 */
input[name^=p]{/*后面属性覆盖前面那个*/
background-color: blue;
font-size: 20px;
color: yellow;
}
3.属性选择器之----结尾:" $ "
以 $= 查找指定条件结尾的标签名的格式化样式
/* 3.选择指定属性以指定字符结尾的元素 */
input[name$=x]{
background-color: pink;
}
五:伪类选择器
这里用链接a来示范伪类选择器的作用:包括鼠标悬停样式(a:hover)/鼠标点击样式(a:active)/访问过样式(a:visited)--------------去除超链接下划线:text-decoration:none;
1.鼠标悬停样式(a:hover)
/* 1.1 hover:设置鼠标悬停效果 */
a:hover{
background-color: pink;
font-size: 40px;
font-style: italic;/*字体样式:倾斜效果*/
color: blue;
position: relative;/*相对定位*/
left: 2px;
top: 2px;
}
2.鼠标点击样式(a:active)
/* 1.2 a:active:按下鼠标后的效果 */
a:active{
color: black;
}
3.访问过的样式(a:visited)
/* 1.3 a:visited:设置访问后的效果 */
a:visited{
background-color: grey;
color: red;
}
六:盒子模型
盒子模型的样式属性有:内边距(padding) 边框线(border) 外边距(margin)
1.内边距(padding)
内边距有四个方向上的距离:上右下左,可以使用padding-方向单独设置值,也可以直接用padding属性直接为四个方向赋值,赋值顺序为:上-右-下-左 或者上 -右左 -下 == 或者上下-左右== 或者上下左右
/* 1.一次设置一个方向上的内补丁 */
#d1{
padding-top: 10px;
padding-right: 20px;
padding-bottom :30px;
padding-left:40px;
}
/* 2.直接使用padding属性设置值(4个:上右下左) */
#d2{
padding:10px 20px 30px 40px;
}
/* 3.直接使用padding属性设置值(3个:上 左右 下) */
#d3{
padding:10px 20px 40px;
}
/* 4.直接使用padding属性设置值(2个:上下 左右 ) */
#d4{
padding: 20px 40px;
}
/* 5.直接使用padding属性设置值(1个:上下左右 ) */
#d5{
padding: 30px;
}
2.边框线(border):三个子属性(border-color/border-style/boride-width)
子属性有:
-
border-color:边框的颜色
-
border-style:边框线的线型样式:solid-实线 double-双线 dotted-点线 dashed:虚线
-
border-width:边框宽度(像素)
注意:设置边框样式顺序依然是:上-右-下-左 或者上 -右左 -下 == 或者上下-左右== 或者上下左右 四个方向一样时可以简写: border:线宽 颜色 线型
/* 2.一次性设置一条边框(上右下左) */
#d1{
border-top: red solid 5px;
border-right: pink dotted 10px;
border-bottom:orange dashed 15px;
border-left: blue double 20px;
}
/* 3.分别设置三个子属性(设置4个值:上右下左) */
#d2{
border-color: blue red yellow grey;
border-style: solid double dotted dashed;
border-width: 5px 10px 15px 20px;
}
/* 4.分别设置三个子属性(设置3个值:上 左右 下) */
#d3{
border-color: gold red yellow;
border-style:dashed solid double;
border-width:5px 10px 20px;
}
/* 5.分别设置三个子属性(设置两个值:上下 左右) */
#d4{
border-color: yellow red;
border-width: 10px 20px;
border-style:solid dashed;
}
/* 6.分别设置三个子属性(设置一个值 上右下左) */
#d5{
border-color: red;
border-style: solid;
border-width: 10px;
}
/* 7.简写上面的(线宽 颜色 线型) */
#d6{
border:10px red solid;
}
3.外边距(margin)
外边距有两个方向上的距离:一个是垂直方向(margin-top/margin-bottom)上的外边距,一个是水平方向(margin-right/marin-left)上的外边距
- 两个盒子之间上下垂直间距是:上面盒子的下边距和下面盒子的上边距取两者最大值
- 两个盒子之间左右水平间距是:左边盒子的右边距和右边盒子的左边距取两者之和;
/* 1.设置d1和d2的垂直外边距 */
#d1{
margin-bottom: 10px;
}
#d2{
margin-top:20px;
}
/* d1到d2的距离是20px;说明垂直间距是上边盒子的下边距和下面盒子的上边距取最大值 */
/* 2.左右外边距的距离判断 */
scan{
background-color: blue;
padding: 30px;
border: 1px yellow solid;
}
#d3{
margin-right: 30px;
}
#d4{
margin-left: 30px;
}
/* 总结:d3到d4的距离为60px,说明左右间距是左边盒子的右边距加右边盒子的左边距 */
</style>
七:盒子的浮动
当我们定义两个div盒子时,他们是垂直排布的,此时我们需要他们进行紧密横向排布,就可以为添加浮动(float)属性;
- float-left:左浮动
- float-right:右浮动
- 需要解决外部包围的盒子坍塌的问题,因为外部盒子的撑大是右内部盒子撑起来的,如果内部盒子浮动半层,会导致外部盒子坍塌现象:
.clearfix:after {
content: ".";
display: block;
height: 0;
visibility: hidden;
clear: both /*清空左、右浮动*/
}
八:background属性详解
-
backgound-color:设置背景颜色
-
backgound-image:url(…):设置背景图片,此时背景图片平铺方式默认的是铺满整个区域
-
background-repeat:设置背景图片的平铺方式
- no-repeat:不平铺
- repeat:默认值,平铺
- repeat-x:x方向上平铺
- repeat-y:y方向上平铺
-
background-position:x y;设置背景图片位置,相对于所在区域的左上角为起始点
参数一:水平方向
参数二:垂直方向
-
方法一:用关键字
- 水平位置:left center right
- 垂直方向:top center bottom
-
方法二:用数值(可以是负数)
- 100px 200px
-
-
background-attachment:设置背景是否随滚动条滚动而滚动
- fixed:不随滚动而移动,始终显示在屏幕上
- scroll:默认,随滚动而移动
-
复合使用顺序—>背景颜色bgc->背景图片url->平铺方式repeat->定位方式position:x,y;
background: royalblue url(img/1.png) no-repeat center bottom;
九:font字体复合样式的用法
- font-size:字体大小,默认14ps,可以无限大取值;
- forn-family:字体类型,宋体…
- forn-weight:字体加粗
- forn-style:字体显示样式,如斜体italic
- line-height:xxpx 字体行高
- 复合用法:顺序—>字体样式style->字体粗细weight->字体大小size/字体行高line->字体类型family
font:italic 300 20px/150px "宋体";
十:overflow属性和用法
- overflow处理超出规定范围的内容的处理方式,可以实现剪切多余内容或者实现添加滚动条的方式
- 第一中,在x和y方向同时操作
- hidden:剪切隐藏多余内容
- scroll:出现滚动条,不论内容是否有超过范围
- auto:根据内容判断是否使用滚动条
- 第二种:分别规定x和y方向的处理结果
- overflow-x;hidden scroll outo
- overflow-y;hidden scroll outo
十一:display和visibility(层的显示与隐藏)
- display:none;----->意思是(显示:没有显示),这种隐藏的方式会自动让出当前的位置
- visibility:hidden;—>意思是(可见度:隐藏),这种隐藏方式不会让出当前的位置
十二:盒子的定位position
1.fixed---->固定定位
position:fixed------->固定定位,相对于整个浏览器的左上角为参照物,属性有top right bottom left
/* 1.position:可以设置盒子的位置
1.1) 固定定位:fixed;(相对浏览器定位)
属性:top right bottom left
*/
position: fixed;
left: 100px;
top: 80px;
2.relative----->相对定位
position:relative------>相对定位,是以本该出现的位置,即以自身所在位置作为参照物
#d2{
/* 1.相对定位:position:
1.2) relative:相对定位,相对自身位置移动
*/
position: relative;
top: 50px;
left: 50px;
}
3.absolute---->绝对定位
position:absolute--------->绝对定位,表示以最近的那个盒子作为参照物,且此盒子不能是position:static(默认状态)的,
/* 1.绝对定位:表示以最近的那个有定位的盒子作为参照物
盒子默认定位是static,不能通过static定位的盒子做参照物
position:
1.3) absolute:绝对定位
*/
position: absolute;
left: 30px;
bottom: 20px;
}
2420
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
