第二天
样式,css
浏览器只是html的环境,所以浏览器可以加载标签。除了html,其他的我们统统叫做资源。
在html中添加css的几种方法:
第一种:行间样式
给标签添加一个style属性,在style属性中写样式属性。
style是标签属性,color是样式属性
第二种:行内样式
在head标签中添加style标签,所有的样式属性都写在style中。
选择器:就是取一个可供选择的名字
1、标签名:原有的标签名 如h、p、a等
2、id名:唯一的一个名字
3、类名 class:可以有多个
标签名:p{...},id名:#xie{...},类名:.dier{...}
取名可以取a1 但不能取1a,名字尽量语义化
选择器权重:同时满足三个选择器时,以权重来计算最终结果。
标签权重为:1 类的权重为:10 id的权重为:100 行的权重为:1000
css常见样式
字体:font
颜色:color:red
大小:font-size:20px;20是数字 px是像素 默认字体nt是16px
样式:font-style:normal; 正常
:italic; 斜体
:oblique; 倾斜
字形:font-family:"微软雅黑"(除了汉子调成中文,其他无论什么都输英文格式)
图片:img
宽 width:200px
高 height:200px
第三种:外部引入
新建css文件,专写样式,再html中引用该资源。
<link rel="stylesheet" type="text/css" href="路径">
div 盒模型
div是标签,是一个模块,方便我们页面排版。
div是个标签,做项目时,需看到盒子占的空间,
常用属性:宽、高、边框
边框:border
边框样式:boeder-style:solid(实线)/dashed(虚线)
边框颜色:border-color:red
边框粗细:border-width
这三个可以简写: border:1px solid blue
div的边距:
外边距:margin 内边距:padding
maegin-top;margin-right;margin-bottom;margin-left。注意顺序
常见的margin设置方式:
margin:10px;代表上右下左都是10px
margin:10px 20px;代表上下是10px 左右是20px
margin:10px 20px 30px ;代表上是10px 左右是20px 下是30px
margn:10px 20px 30px 40px;代表上右下左(顺时针)
margin:20px auto;上下都是20px 左右平均,效果是水平居中
备注: 两个挨着元素,当外边距有重叠时,按最大的值,不会叠加。上面的两个div
最终实际外边距是30px。
文本样式:text
文本对齐方式:text-align:center/left/right/justify;
文本缩进::text-indent:20px;
文本样式:text-decoration:none/underline;
表格:table
表格标签:<table></table>
行标签:<tr></tr>(无列)
单元格:<td></td>
快捷方式:tr * 3 > td * 3 Tab
单元格合并:
水平合并 colspan=”3”
上下合并 rowspan=”2”
块级元素、行级元素
块级元素:不管内容多少,他都会独占一行。
优点:方便写网页结构,缺点: 浪费太多排版。
特点:可以设置宽高,常见的 div p li ul 等
行级元素:不管内容多少,不会独占一行。
优点、特点:与块级相反
块级变成行级 :在块级css样式上加个属性 display:inline;
行级变块级: 在行级css样式上加个属性 display:block;
行级块元素 给这个标签加属性 display:inline-block; 既能设置宽高,又能在一行。