CSS通常被称作CSS样式表或层叠样式表,用于设置HTML页面的外观显示样式。
CSS以HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等,而且还可以针对不同的浏览器设置不同的样式。
书写位置
行内式 也就是内联式,通过标签的style属性来设置元素样式。语法格式如下:
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
内嵌式 将CSS代码集中写在HTML文档的head头部标签中并且用style标签定义,语法格式如下:
<head>
<style type="text/CSS">
选择器 {
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}
</style>
</head>
外链式 将所有样式放在一个或多个以 .CSS 为拓展名的外部样式文件中,通过link标签将外部样式表文件链接到HTML文档中,语法格式如下:
<head>
<link href="CSS文件的路径" rel="stylesheet" />
</head>
rel:定义当前文档与被链接文档之间的关系,在这里需要指定为“stylesheet”,表示被链接的文档是一个样式表文件。
CSS基础选择器
标签选择器 是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。
把某一类标签全部选择出来 比如所有的div标签 和 所有的 span标签。
类选择器 在标签调用时使用 class="类名",选择一个或多个标签。
.类名 { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
id选择器 同 类选择器调用时定义id属性,元素的id是唯一的,只能对应文档中某一个具体的元素。
#id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
通配符选择器 使用*表示,作用范围最广,匹配页面中所有元素。经常使用清除页面的默认边距。
去除图片底侧空白缝隙
1.img vertical-align:middle | top等等。 让图片不要和基线对齐。
2.给img 添加 display:block; 转换为块级元素就不会存在问题了。
CSS复合选择器
交集选择器 书写方式两个选择器挨着写
并集选择器 定义相同的CSS样式。通过 “,”相连
后代选择器 用来选择元素或元素组的后代,其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔。当标签发生嵌套时,内层标签就成为外层标签的后代。
子元素选择器 其写法就是把父级标签写在前面,子级标签写在后面,中间跟一个 > 进行连接,注意,符号左右两侧各保留一个空格。
相邻选择器 语法: 选择器1 + 选择器2 {属性:值; 属性: 值;}
伪类选择器 用于向某些选择器添加特殊的效果。
-
:link /* 未访问的链接 */
-
:hover /* 鼠标移动到链接上 */
-
:active /* 选定的链接 */
-
:visited /* 已访问的链接 */
结构伪类选择器(css3)
E:first-child 选择父元素的第一个子元素E
E:last-child 选择父元素的最后一个子元素E
E:nth-child(n) 匹配父元素的第n个子元素E,假设该子元素不是E,则选择器无效
E:nth-last-child(n) 匹配父元素的倒数第n个子元素E,假设该子元素不是E,则选择器无效
E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E
E::placeholder , 修改占位符样式
伪元素选择器(CSS3)
E::first-letter文本的第一个单词或字(如中文、日文、韩文等)
E::first-line 文本第一行;
E::selection 可改变选中文本的样式;
E::before和E::after 在E元素内部的开始位置和结束位创建一个元素,该元素为行内元素,且必须要结合content属性使用。
CSS三大特性
层叠性 如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将另一个属性层叠掉
一般情况下 遵循就近原则。
继承性 指书写CSS样式表时,子标签会继承父标签的某些样式。
优先级 计算权重,权重可以叠加。权重是优先级的算法,层叠是优先级的表现。
元素的显示与隐藏
display显示 display : none 隐藏对象 与它相反的是 display:block 除了转换为块级元素之外,同时还有显示元素的意思。
特点:隐藏之后,不再保留位置。
visibility可见性 visible : 对象可视 hidden : 对象隐藏
特点:隐藏之后,继续保留原有位置。
overflow溢出 检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。