CSS

CSS

  • 一.CSS的概念
  • 二.CSS基本语法结构
    • 结构
    • Style标签
  • 三.CSS样式
      • 注:
      • 1.行内样式
      • 2.内部样式表
      • 3.外部样式表
      • 4.样式优先级
  • 三.CSS基本选择器
    • 标签选择器
    • 类选择器
    • ID选择器
    • 区别
    • 基本选择器的优先级
  • 四.css高级选择器
    • 1.层次选择器
    • 2.结构伪类选择器
    • 3.属性选择器
  • 五.总结

一.CSS的概念

  • Cascading Style Sheet 级联样式表
  • 表现HTML或XHTML文件样式的计算机语言
    包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定

二.CSS基本语法结构

结构

选择器{
声明1;
声明2;
}

Style标签


三.CSS样式

注:

在这里插入图片描述

1.行内样式

使用style属性引入CSS样式

style属性的应用

直接在HTML标签中设置的样式

在这里插入图片描述

2.内部样式表

CSS代码写在的


CSS_第1张图片

3.外部样式表

CSS代码保存在扩展名为.css的样式表中
HTML文件引用扩展名为.css的样式表,有两种方式
链接式
导入式


  ……

……

CSS_第2张图片
CSS_第3张图片

4.样式优先级

就近原则
CSS_第4张图片

三.CSS基本选择器

标签选择器

~

,

,

类选择器

.class{
color:..;
}
<标签名 class= "类名称">标签内容

常用标签名span
CSS_第5张图片

ID选择器

#id { font-size:16px;}

CSS_第6张图片

区别

标签选择器直接应用于HTML标签
类选择器可在页面中多次使用
ID选择器在同一个页面中只能使用一次

基本选择器的优先级

ID选择器 > class类选择器 > 标签选择器

四.css高级选择器

1.层次选择器

CSS_第7张图片

a.后代选择器
CSS_第8张图片

b.子选择器
CSS_第9张图片

c.相邻兄弟选择器
CSS_第10张图片

d.通用兄弟选择器
CSS_第11张图片

2.结构伪类选择器

CSS_第12张图片
示例
CSS_第13张图片
使用E F:nth-child(n)和E F:nth-of-type(n)的 关键点

  • E F:nth-child(n)在父级里从一个元素开始查找,不分类型
  • E F:nth-of-type(n)在父级里先看类型,再看位置

3.属性选择器

CSS_第14张图片
示例
CSS_第15张图片
CSS_第16张图片
CSS_第17张图片
CSS_第18张图片

CSS_第19张图片

五.总结

CSS_第20张图片

你可能感兴趣的:(HTML学习日志,html,css)