HTML-CSS-JavaScript

CSS 层叠样式表 Cascading Style Sheets

优势:
内容与表现分离
网页表现统一,容易修改
丰富的样式,使得页面布局更加灵活
减少网页代码量,增加网页浏览速度,节省网络宽带
运用独立于页面的CSS,有利于网页被搜索引擎搜索

CSS内部样式

标签 style
标签放在文档的头部

CSS行内样式

表现和内容混杂在一起,行内样式会损失样式表的优势
要使用行内样式,需要在相关的标签内使用样式(style)属性,多样式用“;”隔开
style属性可以包含任何CSS属性

CSS外部样式

标签 link (单标签)
属性:href:文件路径
type:文件类型
rel:使用外部样式表
总结:样式层叠时根据“就近原则”

文本样式:

color-颜色
text-align:(文本位置)left content right
text-decoration:(文本修饰) underline(下划线) line-through(删除线) overline(上划线) none
line-height:(行高) 50px

背景样式:

width:(宽)800px;
height:(高)800px;
background-image:(设置背景图片) url();
background-repeat:(设置背景图片不平铺)no-repeat repeat-x repeat-y

链接样式:(爱恨原则 LoVe HAte)

未访问样式:link
以访问样式:visited
鼠标悬移:hover
鼠标点击:active

列表样式:

list-style-type:(列表样式)circle none;

表格样式:

background-color:(背景色)
line-height:(行高)
border-collapse:(合并边框)collapse
text-align:(文本位置)

CSS选择器

1.标签选择器(元素选择器)
文档的元素就是最基本的选择器
设置HTML的样式,HTML的标签即为选择器
适用于一类标签进行选择
语法:标签名{}

2.ID选择器
关键字: id
需要给添加样式的标签设置一个ID名称
可以为标有特定ID的元素指定特定的样式
ID选择器以 “#”符号来定义
语法: #id名{}

扫描二维码关注公众号,回复: 4087183 查看本文章

3.类选择器
关键字:class
需要给添加样式的标签加上一个类名
用于描述一组元素的样式,可以在多个元素中使用,同一个属性也可以有多个class名称
类选择器以一个 “.”符号表示
语法: .class名{}

4.并集选择器
创建由逗号分隔的多个选择器可以将样式应用到单个选择器匹配的所有元素
语法:选择器,选择器,选择器{}

5.后代选择器
多个选择器以空格分开,组成包含关系,且右边的选择器属于左边
即右边的选择器只能在左边的选择器范围内选择

6.子代选择器
选择匹配元素中的直接后代目标元素为匹配第一个选择器的元素后代
且匹配第二个选择器用于选择指定标签元素的第一个子元素
语法:第一个选择器 > 第二个选择器
·> 作用于元素的第一代后代, 空格作用于元素的所有后代

7.兄弟选择器
相邻兄弟选择器可选择紧接在另一个元素后的元素,且二者有相同的父亲
语法: 选择器 + 选择器

8.伪类选择器
:link选择器 选择未访问链接元素
:visited选择器 选择以访问的链接元素
:hover选择器 鼠标悬停在其他上的元素
:active选择器 用户被激活的元素,通常意味着用户即将点击该元素
爱恨原则:“LoVe HAte”

9.属性选择器
对带有指定属性的HTML元素设置样式,可以拥有指定属性的HTML元素设置样式,不仅仅局限于class和id属性
语法 标签名[属性=值]{}

猜你喜欢

转载自blog.csdn.net/qq_40262690/article/details/83185522