CSS总结 • 【第1章 CSS三种引入方式、CSS选择器】

全部章节 >>>>


//1.CSS简介

  • CSS是cascading Style Sheet的缩写
  • CSS全称为"级联样式表",通常又称为“风格样式表"用于网页风格设计

//2.CSS的三种引入方式

三种引入方式 用法
行内式
内嵌式 内写样式,style写在head头部标签里
外链式

优先级:行内式>内嵌式>外链式
CSS总结 • 【第1章 CSS三种引入方式、CSS选择器】_第1张图片

//3.CSS选择器

3.1基本选择器
基本选择器 用法
标签选择器 标签名{ 样式属性:样式值;}
类选择器 (点).class值{ 样式属性:样式值;}、class名不能以数字开头
id选择器 (井号)#id名{ 样式属性:样式值;}、不能以数字开头,具有唯一性
通配选择器 (星号)*{样式属性:样式值;}、同时给所有标签添加样式

优先级:id选择器>类选择器>标签选择器>通配选择器
CSS总结 • 【第1章 CSS三种引入方式、CSS选择器】_第2张图片

3.2复杂选择器
复杂选择器 意义 用法
交集选择器 从多个相同的元素中选择想选择的元素 标签选择器和类选择器、或标签选择器和ID选择器,一起使用。span.class{} span#id{}
并集选择器 同时给各个选择器添加相同的部分样式 通过逗号连接选择器, 选择器1,选择器2{}
层次选择器 给后代、父子、兄弟、相邻关系的标签添加样式 后代:M N{} 父子:M>N{} 兄弟:M~N{}当前M下面的所有兄弟N 相邻:M+N{}当前M相邻的N标签
伪类选择器 根据不同的状态显示不同的样工,默认超链接为:蓝色,有下划线。 未点击:link、经过:hover、点击时:active、点击后:visited

伪元素选择器

  • 为第一个字符添加样式:first-letter
  • 为第一行添加样式:first-line
  • 在最前面添加内容:before
  • 在最后面添加内容:after
    CSS总结 • 【第1章 CSS三种引入方式、CSS选择器】_第3张图片
    CSS总结 • 【第1章 CSS三种引入方式、CSS选择器】_第4张图片

CSS总结 • 【第1章 CSS三种引入方式、CSS选择器】_第5张图片
点击时:
在这里插入图片描述
CSS总结 • 【第1章 CSS三种引入方式、CSS选择器】_第6张图片

你可能感兴趣的:(HTML,CSS总结,css)