一.css简介
css是层叠样式表 ,可以用来修饰网页。
二.引入方法
css有三种引入方式
1.用行内样式(行内样式/嵌入样式)
就是在标签内引入,<标签 style="width:100px; height:100px;"> </标签>
2.内部样式
①首先body里面要有元素标签
②然后在head里面创建<style style="type=text/css"></style>
③在type里面修饰过程,对相应的标签 进行修饰
选择器(选择符){属性:属性值}
3.外部样式
用link引入,<link rel="stylesheet" style="text/css">
通过import把html和css进行连接,格式<style>@import url();</style>
Link引入和import的区别:
①Link是html的语法,而import是css的语法
②link在页面加载的时候是html结构和css样式一起加载的,import在页面加载的时候是先加载html结构,在加载css样式。import在网速比较慢的情况下会出现闪烁问题。
③link没有兼容问题,而import在IE5以下不兼容。
当修饰样式的时候,同一个标签有多个样式时,会发生冲突
冲突之后的解析规则:
规则1:权重相同的时候,采用就近原则,即谁的css样式离标签就解析谁的
规则2:权重不同的时候,权重高的覆盖权重低的
权重占比大小:
行内样式的(1000)> id选择器(100)> class选择器(10) > 标签选择器(1) > 通配符选择器*(0)> 自带样式 > 继承样式
选择器:
①基本选择器②层次选择器③伪类选择器④伪对象选择器⑤属性选择器
基本选择器就是类型选择器(标签选择器)
可以用class和id进行区分
class语法是:.box{}
id语法是:#box{}
id的属性只能是一个
css相关选择器:
①基本选择器
通配符 *{margin: 0;padding: 0}清除所有标签自带的内外间距。
群组选择器 可以简化代码,对代码进行优化
②层次选择器
包含结构的 有后代选择器(包含选择器);还有子选择器
并列结构的 有相邻兄弟选择器和通用兄弟选择器
css相关属性:
文字大小 font-size 浏览器默认字体大小是16 谷歌最小解析是12
文字颜色 color
字体 font-family
字体加粗 font-weight:bold;
font-weight:bolde;
font-weight:600-900;
字体不加粗 font-weight:normal;
font-weight:400-500;
倾斜 font-style:italic;font-style:oblique;
不倾斜 font-style:normal;
水平对齐方式 text-align:left/right/center/justify;
text-align:justify;只对多行实现两端对齐;
text-align-last:justify;实现单行的时候也可以两端对齐,如果是多行,就只有最后一行两端对齐。
后续再追加...