课堂笔记-CSS基础1

冷冷的O_o

已于 2022-04-05 16:49:09 修改

阅读量240

点赞数

分类专栏：代码学习文章标签： css 前端 html5

于 2022-04-05 16:48:35 首次发布

本文链接：https://blog.csdn.net/qq_51267159/article/details/123962837

版权

代码学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

CSS概述

CSS全称为级联样式表，主要用来控制HTML元素的显示样式。
CSS要在HTML文件中使用主要有三种方式：

行内样式（内嵌样式）
用于定义某一个标记的样式，可以在任何元素中使用style属性进行定义，在四种样式（内嵌样式、内部样式、外部样式、默认样式）中优先级别最高。
优点：直观易懂
缺点：
不具有通用性，无法批量修改
不符合Web开发规范
优先级太高，未来难以覆盖
内部样式
内部样式用于定义某一个网页的样式，通常定义在style HTML元素中，在四种样式（内嵌样式、内部样式、外部样式、默认样式）中优先级别排名仅次于内嵌样式，其语法如下：

<style type="text/css">
   选择器{ 
	属性:属性值;
	......
	属性:属性值;
　}
</style>

优点：符合Web规范，方便易行，可以覆盖一些全局设置
缺点：无法统一修改，样式无法在其他文件中被重用
注意：内部样式通常定义在head标签内

外部样式
在一个HTML文件中可以引入多个外部样式表，当这些外部样式表都对某一个标记进行了样式定义时，起作用的将是最后引用的外部样式文件中对于该标记的定义。
外部样式通常有两种引入方式：

 1. link引入，其语法如下：
<link rel="stylesheet" type="text/css" href="样式表源文件地址">

2. @import引入，其语法如下：
＠import　url(样式表源文件地址)

注意：＠import只能放在style标记内使用，而且必须放在其他CSS样式之前。

CSS选择器

CSS的作用主要是用来给某个或某些HTML元素加上样式，而CSS选择器（Selector）的作用就是用来匹配某个或者某些HTML元素。
CSS中选择器的语法如下：

<style type="text/css">
   选择器{ 
	属性:属性值;
	......
	属性:属性值;
　}
</style>

元素选择器的作用是可以匹配任何HTML元素，例如a，div等。
设置元素选择器的基本语法如下：

HTML元素名{ 
　　样式属性：属性值；
　　样式属性：属性值；
　　......
}

举个栗子：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>元素选择器</title>
<style>
  h2{ color:red;}
  span{ color:blue; font-size:48px;}
</style>
</head>
<body>
  <h2>hello</h2>
  <h2>hello</h2>
  <span>world</span>
</body>
</html>

类选择器样式定义的语法格式如下所示：

.类选择器名称{
　　样式属性：属性值；
　　样式属性：属性值；
　　......
}

举个栗子：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>类选择器</title>
<style>
  .youClass{ 
  	color:red;					/*颜色为红色*/
  }
  .myClass{
  	font-size:16px; 			/*字体大小为16像素色*/
	text-decoration:underline;	/*文字加下划线*/
  }
</style>
</head>
<body>
  <h2 class="youClass">hello</h2>
  <span class="myClass youClass">world</span>
</body>
</html>

定义ID选择器的语法格式：

#ID选择器名称{
　样式属性：属性值；
　样式属性：属性值；
　......
}

ID选择器的使用语法如下所示：

<标记名称 id="ID选择器名称">

交集选择器属于复合选择器，其作用是匹配同时满足多种条件的元素；
交集选择器是使用多个基本选择器连续书写定义的，多使用标签选择器和类选择器连写。
交集选择器的语法如下：

标签选择器.类选择器{
  样式属性：属性值；
  样式属性：属性值；
  ......
}

举个栗子：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>交集选择器</title>
<style>
  h2.special{color:red; font-size:48px;}
</style>
</head>
<body>
  <h2>hello</h2>
  <h2 class="special">hello</h2>
</body>
</html>

后代选择器属于复合选择器，其作用是匹配特定元素内部的后代元素。
后代选择器定义的语法如下：

祖先选择器 后代选择器{
　样式属性：属性值；
　样式属性：属性值；
　......
}

举个栗子：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>后代选择器</title>
<style>
  h2 span{color:red; font-size:48px;}
</style>
</head>
<body>
  <h2 >hello <span>world!</span></h2>
  <span >world</span>
</body>
</html>

并集选择器属于符合选择器，其作用是同时匹配多种类型的不同元素，然后统一进行样式设置。
定义并集选择器的语法如下：

选择器1，选择器2，...，选择器n{
   样式属性：属性值；
   样式属性：属性值；
......
}

举个栗子：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>组合选择器</title>
<style>
  h2,span{
	  color:red; 
	  font-size:48px;
  }
</style>
</head>
<body>
  <h2 >hello </h2>
  <h3> hello world!</h3>
  <span >world</span>
</body>
</html>

子选择器属于复合选择器，其作用和后代选择器类似，匹配某元素内部的嵌套元素，和后代选择器不同的是，子选择器只匹配直接后代。
子选择器使用大于号作为选择器的分隔符，语法格式如下所示：

父选择器 > 子选择器 {
      样式属性：属性值；
      样式属性：属性值；
      ......
}

举个栗子：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>子选择器</title>
<style>
  h2 span {color:blue}
  h2>span{color:red; font-size:48px;}
</style>
</head>
<body>
  <h2 >hello <span>world!</span></h2>
  <h2>hello <p> <span >world</span> </p> </h2>
</body>
</html>

相邻选择器属于复合选择器，如果需要选择紧接在某一个元素后的元素，并且二者有相同的父元素，可以使用相邻兄弟选择器。
相邻选择器使用加号作为选择器的分隔符，语法格式如下所示：

选择器1 + 选择器2 {
      样式属性：属性值；
      样式属性：属性值；
      ......
}

举个栗子：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>相邻选择器</title>
<style>
  h2+span{color:red; font-size:48px;} 
</style>
</head>
<body>
  <h2 >hello <span>world!</span></h2>
  <span >world</span> 
  <span >hello world too!</span> 
</body>
</html>

属性选择器是对带有指定属性的HTML元素进行样式设置。
使用CSS属性选择器，可以只选中含有某个属性的HTML元素，或者同时含有某个属性和其对应属性值的HTML元素，并对其进行相关样式设置。
属性选择器定义的语法格式如下：

标记名称[属性选择符] {
　　样式属性：属性值；
　　样式属性：属性值；
　　......
}

属性选择器也可以加入运算符，例如：

[属性选择符=值] {
　　样式属性：属性值；
}

其他可用的属性值包括：
!=：属性值不等于
^=：属性值以什么开头
$=：属性值以什么结尾
*=：属性值包含什么

举个栗子：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>属性选择器</title>
<style>
  p[align]{color:red; font-size:48px;}
  p[align=right]{color:blue; font-size:24px;}
</style>
</head>
<body>
  <p align="center">Hello world!</p> 
  <p align="right">Hello world too!</p> 
</body>
</html>

CSS样式优先级

浏览器会按照不同的方式来确定样式的优先级，其原则如下：

按照样式来源不同，其优先级如下：内嵌样式>内部样式>外部样式>浏览器默认样式
按照选择器不同，其优先级如下： id选择器>class类选择器>元素选择器
当样式定义优先级相同时，取后面定义的样式为最终显示效果样式
使用!important可以设置最高优先级
复合选择器的优先级需要累加，规则如下：

选择器	优先级
ID选择器	1，0，0
类选择器	0，1，0
元素选择器	0，0，1

样式优先级的使用，举个栗子：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>样式优先级</title>
<link href="style/priority.css" rel="stylesheet" type="text/css">
<style>
  h2{color:green;}
</style>
</head>
<body>
  <h2>内部样式定义的颜色和外部定义字体大小起作用</h2>
  <h2 style="color:pink; font-size:20px;">
    内嵌样式起作用，文字粉色，文字大小20像素
  </h2>
</body>
</html>

style/priority.css（外部样式）：
h2{
	color:red;
	font-size:16px;

选择器优先级的使用，举个栗子：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>样式优先级</title>
<style>
  #title{color: red;}
  .special{color: green;}
  h2{color:blue;}
  [text=www]{color:black;}
  .very_special{color: green;}
  .important{
    color: brown !important;
  }
</style>
</head>
<body>
  <h2 class="special" id="title">ID优先</h2>
  <h2 class="special">Class优先</h2>
  <h2 class="special" text="www">属性和Class同级，谁后定义谁优先</h2>
  <h2 class="very_special" text="www">属性和Class同级，谁后定义谁优先</h2>
  <h2 text="www">属性优先比标签优先</h2>
  <h2>标签优先级最低</h2>
  <h2 id="title" class="important">important优先级最高</h2>
</body>
</html>

复合选择器优先级的使用，举个栗子：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>样式优先级</title>
<style>
  /** RainSia::tip {{{优先级为：0,1,1}}} RainSia::end **/
    h2.special { color: red; }
  /** RainSia::tip {{{优先级为：0,1,1}}} RainSia::end **/
    h2[id]{ color: green; }
  /** RainSia::tip {{{优先级为：0,2,1}}} RainSia::end **/
    h2.special.very { color: red; }
  /** RainSia::tip {{{优先级为：0,1,1}}} RainSia::end **/
    h2[text=olay] { color: green; }
</style>
</head>
<body>
  <h2 class="special" id="title">究竟哪个样式优先呢？</h2>
  <h2 class="special very" text="olay">究竟哪个样式优先呢？</h2>
</body>
</html>

冷冷的O_o

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
课堂笔记-CSS基础1

CSS概述CSS全称为级联样式表，主要用来控制HTML元素的显示样式。CSS要在HTML文件中使用主要有三种方式：行内样式（内嵌样式）用于定义某一个标记的样式，可以在任何元素中使用style属性进行定义，在四种样式（内嵌样式、内部样式、外部样式、默认样式）中优先级别最高。优点：直观易懂缺点：不具有通用性，无法批量修改不符合Web开发规范优先级太高，未来难以覆盖内部样式内部样式用于定义某一个网页的样式，通常定义在style HTML元素中，在四种样式（内嵌样式、内部样式、外部样式、默认
复制链接

扫一扫