8.21学习笔记
首先需要理解,浏览器只是提供识别html文件的环境,除了html外,其他的东西我们把他们叫资源。
在html中添加css的几种方法
第一种,行间样式
给标签添加一个style属性,在style属性中写样式属性。
其中style是标签属性,color是样式属性。
第二种 行内样式
在head中添加style标签,所有样式属性都添加在style标签中
选择器
选择器就是选择你所需要设置样式的标签,有以下几种选择方法
1.标签名,比如h1,p,a
2.id名,但是id名必须是唯一的
3.class类名 用class可以起多个名称
选择器权重
在这里我们可以看到,有三个li标签同时满足第一个标签名选择器,但是下面两个又分别有自己的id名和class类名,那么问题就来了,到底会显示哪种效果呢,看一下效果
当他们的选择器有冲突时,它是根据选择器的权重来决定的,标签名的权重是1,类名的权重是10,id名的权重是100,style的权重是1000.
css常见样式
字体 font,样色 color,大小 font-size,字体样式 font-style
图片样式 img
宽 width
高 height
Div盒模型
div是标签,是一个模块,方便我们排版。
在我们做项目的时候,我们往往需要知道这个盒子所占的空间,所以他就有这么几个属性
宽width 高height 边框 border
其中边框又有边框样式 border-style:solid/dashed,实线和虚线
边框颜色 border-color:red等
边框粗细 border-width:10px;数值可以任意调整。
Div边距
外边距 margin-top,right,bottom,left,依次是上右下左边距
外边距margin常见的简化设值方式
margin:10px,表示上下左右都是10px
margin:10px,20px,表示上下都是10px,左右是20px,
margin:10px,auto;表示上下都是10px,左右平均居中。
Margin:10px 20px 30px; 代表上是10px 左右是20px 下是30px;
Margin:10px 20px 30px 40px; 代表上是10 右是20px 下是30px 左是40px;
内边距padding,基本同上
注意:两个挨着元素,当外边距有重叠时,按最大的值,不会叠加。
文本样式:text
text-align:center/left/right等等,表示文本居中,左对齐,右对齐。
文本缩进 text-indent:缩进值px
文本样式 text-decoration:none/underline,overline,这个可以设置一些下划线,上划线等。
块级元素
不管内容多少,他都会独占一行,特点是方便写网页结构,缺点是浪费空间。
可以设置宽和高
常见的有div,p,li等
行级(内敛)元素
不管内容多少,都不会独占一行,比较节省空间。
而且不能设值宽和高
常见的有a,span
块级变成行级 :在块级css样式上加个属性 display:inline;
行级变块级: 在行级css样式上加个属性 display:block;
行级块元素 给这个标签加属性 display:inline-block; 既能设置宽高,又能在一行。
表格:table
表格标签<table></table>
行标签 <tr></tr>
单元格标签<td></td>
单元格合并
水平合并 colspan=”3”
上下合并 rospan=”2”
可以用td标签固定单元格的大小。