注意:建议有css基础
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容
青春不常在,抓紧谈恋爱
- style其实就是标签的属性
- 样式属性和值中间是`:`
- 多组属性值之间用`;`隔开。
- 只能控制当前的标签和以及嵌套在其中的字标签,造成代码冗余
没有实现样式和结构相分离
style标签一般位于head标签中,当然理论上他可以放在HTML文档的任何地方。
type="text/css" 在html5中可以省略。
只能控制当前的页面
没有彻底分离
@import url("css文件路径");
比前两中好,但一般就用第三种,因为这一种你可能都是第一次见
样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
---|---|---|---|---|
行内样式表 | 书写方便,权重高 | 没有实现样式和结构相分离 | 较少 | 控制一个标签(少) |
内部样式表 | 部分结构和样式相分离 | 没有彻底分离 | 较多 | 控制一个页面(中) |
外部样式表 | 完全实现结构和样式相分离 | 需要引入 | 最多,强烈推荐 | 控制整个站点(多) |
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
标签选择器 可以把某一类标签**全部**选择出来 比如所有的div标签 和 所有的 span标签
是能快速为页面中同类型的标签统一样式
不能设计差异化样式。
可以为元素对象定义单独或相同的样式。 可以选择一个或者多个标签
- 类选择器使用“.”(英文点号)进行标识,后面紧跟类名(自定义,我们自己命名的)
- 长名称或词组可以使用中横线来为选择器命名。
- 不要纯数字、中文等命名, 尽量使用英文字母来表示。
蒙多
压缩
复仇之矛
圣枪游侠·奥巴马
#id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
id选择器和类选择器最大的不同在于 使用次数上。
* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
例如下面的代码,使用通配符选择器定义CSS样式,清除所有HTML标记的默认边距。
* {
margin: 0; /* 定义外边距*/
padding: 0; /* 定义内边距*/
}
注意:常用类选择器, 少用其他三种
列子:
p{ font-family:"微软雅黑";}
代替了html中的b 和 strong 标签
属性值 | 描述 |
---|---|
normal | 默认值(不加粗的) |
bold | 定义粗体(加粗的) |
100~900 | 400 等同于 normal,而 700 等同于 bold 我们重点记住这句话 |
代替了 i 和 em 标签 没说禁止(上下同)
属性 | 作用 |
---|---|
normal | 默认值,浏览器会显示标准的字体样式 font-style: normal; |
italic | 浏览器会显示斜体的字体样式。 |
选择器 { font: font-style font-weight font-size/line-height font-family;}
作用:
color属性用于定义文本的颜色,
其取值方式有如下3种:
表示表示 | 属性值 |
---|---|
预定义的颜色值 | red,green,blue,还有我们的御用色 pink |
十六进制 | #FF0000,#FF6600,#29D794 |
RGB代码 | rgb(255,0,0)或rgb(100%,0%,0%) |
注意
我们实际工作中, 用 16进制的写法是最多的,而且我们更喜欢简写方式比如 #f00 代表红色
作用:
text-align属性用于设置文本内容的水平对齐,相当于html中的align对齐属性
其可用属性值如下:
属性 | 解释 |
---|---|
left | 左对齐(默认值) |
right | 右对齐 |
center | 居中对齐 |
注意:
是让盒子里面的内容水平居中, 而不是让盒子居中对齐
单位为px
width : 宽高
height: 高度
作用:
line-height属性用于设置行间距,就是行与行之间的距离,即字符的垂直间距,一般称为行高。
单位:
技巧:
一般情况下,行距比字号大7.8像素左右就可以了。
line-height: 24px;
作用:
text-indent属性用于设置首行文本的缩进,
属性值
1em 就是一个字的宽度 如果是汉字的段落, 1em 就是一个汉字的宽度
p {
/*行间距*/
line-height: 25px;
/*首行缩进2个字 em 1个em 就是1个字的大小*/
text-indent: 2em;
}
text-decoration 通常我们用于给链接修改装饰效果
值 | 描述 |
---|---|
none | 默认。定义标准的文本。 取消下划线(最常用) |
underline | 定义文本下的一条线。下划线 也是我们链接自带的(常用) |
overline | 定义文本上的一条线。(不用) |
line-through | 定义穿过文本下的一条线。(不常用) |
所谓层叠性是指多种CSS样式的叠加。
样式冲突,遵循的原则是就近原则。 那个样式离着结构近,就执行那个样式。
样式不冲突,不会层叠
概念:
子标签会继承父标签的某些样式,如文本颜色和字号。
想要设置一个可继承的属性,只需将它应用于父元素即可。
简单的理解就是: 子承父业。
继承权重为 0 < 标签为 1 < class 10 < id 100<行内 1000 < !important 无穷大
Document
span
谁再问就是傻子
概念:把每个标签当成一个纸盒看待,每个标签就会存在边框,内容,内边距,外边距
特点:
盒子模型是由内容(width,height),边框,内边距,外边距组成
盒子本身的文字和图片等元素就是内容区域
盒子的厚度就是边框
盒子内容于边框的距离就是内边距
盒子与盒子之间的距离就是外边距
border-width 定义边框粗细,单位px
border-style 定义边框样式
可选值:none 默认值,没有边框
solid 单实线 常用
dashed 虚线
dotted 点线
border-color 定义边框颜色 默认为黑色
border-radius 边框圆角
边框的简写
border : border-width border-style border-color
盒子的边框到内容的距离就是内边距
padding-left
padding-right
padding-top
padding-bottom
单位都是数值设定距离
1.内边距会使盒子变大
内边距的简写
padding : 1个值 上下左右
2个值 上下 左右
3个值 上 左右 下
4个值 上 右 下 左
盒子的边框到内容的距离就是内边距
margin-left
margin-right
margin-top
margin-bottom
单位都是数值设定距离
外边距的简写
margin : 1个值 上下左右
2个值 上下 左右
3个值 上 左右 下
4个值 上 右 下 左
块级级盒子水平居中问题
必须满足的条件指定了宽度,将这个盒子左右margin设置为auto
文字居中和盒子居中
行内元素,行内块元素,文本在水平方向居中对齐text-align:center
跨级元素在水平方向居中对齐margin:auto
清除元素的默认内外边距(重要)
自带内外边距的标签:ul li ol dl dt dd p body
为了更灵活方便的控制网页的标签
*{
margin:0;
padding:0;
}
注意:行内元素为了照顾兼容性,尽量只设置左右内外边距,不要设置上下内外边距
优先使用 宽度width > 内边距padding > 外边距margin
w3c标准盒子模型中的宽高度计算:
宽度 = width + 左右border-width + 左右padding
高度 = height + 上下border-width + 上下padding
ie盒子模型(怪异盒模型)
行内标签
特点:和其他行内标签在同行显示,不支持宽高(css样式)
比如:a,b,s,u,i,font,sub,sup,span
块级标签
特点:独占一行,支持宽高(css样式)
比如:h1~h6,p,hr,div,li,ul,ol,dl,dd,dt
行内块标签
特点:同行显示,支持宽高
比如:img