关于css我的认识
简述css
css(Cascading Style Sheet)层叠样式表。用于实现网页布局,美化网页. 学习css就是学习它的属性,选择器.
引用css
引用css有三种方法:
- 行内,在标签上使用style属性设置即可.
- 内部,在head标签中,使用style标签引用.
- 外部,创建一个.css后缀名的独立文件,在head标签中使用link标签引用.
css选择器
1)id选择器
要使用id选择器,需要分成两个步骤:
第一步,需要在对应的标签中增加一个id属性
第二步,需要在css中,使用#+id属性值
2)标签选择器
标签 + 属性 + 内容
3)class选择器
也叫类选择器,使用也是分为两步:
第一步,需要在对应的标签中设置class属性,并设置对应值
第二步,在css的规则中,使用 .+class属性值
4)通配选择器
经常用*来去掉所有标签的margin和padding。
* {margin:0;padding:0;}
5)分组选择器
两个选择器之间使用逗号进行分隔。
h1,h2 {font-size:12px;}
6)后代选择器
用空格搁开
.main h1{font-size:14px;}
7)伪类选择器
如:a标签的hover伪类
a:hover{color:gold;}
css属性
CSS属性的分类:
1)字体相关
2)文本相关
3)盒子模型相关
4)布局相关
5)列表相关
6)定位相关
7)表格相关
…
css属性有很多,但是经常使用的也就二十多个
字体相关
font-style:设置字体是否倾斜 normal italic
font-weight:设置字体是否加粗 normal bold bolder 100 200 300
font-size: 设置字体大小 谷歌浏览器默认是16px 用的最多是的12px 和 14px 可以非常大 不能非常小 最小是12px
font-family: 设置字体类型 和用户电脑上设置的字体也有关系
font:上面的几个属性的复合属性
font:font-style font-weight font-size/line-height font-family
font-style font-weight 可以不写 也可以交换位置
font-size/line-height font-family 必须写 能交换位置
文本相关
text-decoration: 用来设置文本的装饰线 下划线 删除线
underline 下划线 应用:把a标签的默认的下划线去掉 hover时,加上下划线
line-through 删除线 应用:超市的价格
text-indent: 首行空两格 2em 空两个汉字的宽度 -1000em 用来隐藏一个盒子中的文本
text-align: 1)让盒子中的文本居中 2)让行内元素或行内块元素在一个盒子中居中(可以把行内元素或行内块元素当成文本)
盒子模型
盒子分为:块级盒子,行级盒子,行内块级盒子.为了好记 我们将他们称为男盒子(块级),女盒子(行级),人妖盒子(行内块)
常见的块级:div,hn,p,ul,ol,li,dl,dt,dd,form,table
常见的行内:a,span,em,strong
常见的行内块:img,input
]
1)内容区域:宽与高:width 和 height
对于男盒子来说,有width和height; 女盒子则没有
宽度默认值是auto,对于块级元素来说,auto表示尽可能大,对于行内元素来说,auto表示尽可能小。
若不设置高度,男盒子的高度是内容的高度,即高度是由内容撑起来的,对于女盒子来说,也是由内容撑起来的,但是和font-size也有关系。
2) 内填充区域: padding
用来设置内填充,也叫补白 表示内容区域和边框之间的距离
四个方向: 用的也比较多的
padding-top:
padding-right:
padding-bottom:
padding-left:
padding后面也可以跟一个值,二个值,三个值,四个值:
一个值:padding:10px 四个方向的padding都是10px
二个值:padding:10px 20px; 上下是10px 左右是20px
三个值:padding:10px 20px 30px; 上是10px 左右是20px 下是30px
四个值:padding:10px 20px 30px 40px; 上 右 下 左
3) 边框: border
边框的粗细 border-widht 边框的粗细:粗细大部分情况下单位都是px 你也可以使用单词 使用单词时 在不同的浏览器下代表粗细是不一样的
边框的样式 border-style solid 实线 dashed 虚线 none 没有线
边框的颜色 border-color 单词 用的最多还是16进制 也可以使用rgb函数
一般使用border进行书写 border是复合属性, 例如:border:1px solid red;
border后面的属性是没有顺序的,但是一般都是先写border-width,然后是border-style,最后是border-color。
也可以单独设置某一个方向上的border border-top:1px solid red;
4) 外填充区域:margin
表示外边距 盒子与盒子之间的距离 是边框之外的间隔 是在border之外的
四有个方向:
margin-top
margin-right
margin-bottom
margin-left
margin后面也可以跟一个值,二个值,三个值,四个值:
一个值:margin:10px 四个方向的margin都是10px
二个值:margin:10px 20px; 上下是10px 左右是20px
三个值:margin:10px 20px 30px; 上是10px 左右是20px 下是30px
四个值:margin:10px 20px 30px 40px; 上 右 下 左
布局相关
三大布局:
1.标准流
从左到右,从上到下块级元素独占一行,行内元素碰到父盒子边缘换行
2.浮动
图文环绕,实现网页布局。实现布局,使得块级元素能够在同一行中排列
使用:float:属性值 有 left;right
浮动有如下三大特征:
1)包裹性
如果一个块级元素,在没有设置width的情况下(前提条件),一旦使用了float,那么他的width就会发生变化,尽量最小,能够完全包裹其中内容即可。如果我对一个块级元素已经设置了width,则不会具备包裹性
2)破坏性
在一个块级容器中(如div),如果它的子元素,都有浮动(比如float),并且没有清除这个浮动,那么块级容器将会塌陷。
如何解决这种塌陷??
一,在块级容器中,使用overflow:hidden
二,在块级容器结束之前,添加一个空的div标签,然后设置clear:both的属性
三,给块级元素指定一个height值
3)块级框
如果一个行内元素,设置了浮动(left或right)之后,它就会变成块级框,就可以设置其盒模型的所有属性,如width和height
3.层布局
在css中,有三种定位方式:相对定位,绝对定位,固定定位
relative,相对定位 absolute,绝对定位 fixed,固定定位
css问题处理
浮动清除
浮动需要清除,如果不清除,会对后面的内容造成影响
清除可以使用clear属性来完成: clear属性有三个值,left、right和both,通常就使用both。
溢出处理
overflow:溢出 作用:用于处理内容溢出的情况
有如下四种属性值:
visible:表示可见,它是默认值
hidden:表示隐藏
scroll:生成一个滚动条
auto:自动
塌陷问题
1.兄弟元素之间的重叠问题:
<div class="box7">box7</div>
<div class="box8">box8</div>
.box7{ width: 200px;height: 200px;background-color: gold; margin-bottom: 150px;}
.box8{ width: 200px;height: 200px;background-color: skyblue; margin-top: 100px;}
按理说:两个盒子之间的margin应该是250px
实际上:只有150px
这种现象叫:margin的塌陷
margin塌陷的前提:1)男标签 2)垂直方向
margin到底是多少:取大原则
如何避免塌陷?
答:只设置一个盒子的margin。
2.父子元素之间的重叠问题:
<div class="box9">
<p class="box10">我是一个段落</p>
</div>
.box9{
background-color: pink;
margin-top: 50px;
}
.box9 .box10{
background-color: gold;
margin-top: 30px;
}
按理说:p标签上面的应该有80px的margin
实际是:只有50px margin
这种现象叫:父子元素之间的margin重叠
解决:
1)给父元素加border
2)给父元素加padding 只加一个0px不行
以上仅为我的认识,对于css还有很多细挖的东西