CSS 的创建和选择器

ha_soga

已于 2022-03-01 08:59:31 修改

阅读量231

点赞数

分类专栏：前端文章标签： css 前端

于 2022-02-28 22:28:57 首次发布

本文链接：https://blog.csdn.net/ha_soga/article/details/123191953

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

英文全称： Cascading Style Sheets，层叠样式表。 对HTML中元素进行排版。

1.在HTML中添加CSS

1.1 Inline Styles
<h1 style="color : blue;">This is a heading</h1>
上边的 style="color : blue;"就是插入的CSS，适用于稍微简单，没有那么复杂的CSS

直接作用在想要作用的元素上，优先级最高。

1.2 Internal Style
<head>
 <style>
   h1 {
        color: red;
      }
 </style>
</head>
把复杂的CSS包起来

作用在想要作用的元素上边（通过元素选择器），例子选择的h1元素，作用范围：所有的h1。

优先级低于Inline。

1.3 External Style
<head>
 <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
rel（relationship） - 作用 type - 文件类型 href - 地址

浏览器读取HTML文件，读到link会去下载这个link

在HTML文件外部创建新的CSS文件，优先级低于Internal。

优先级：浏览器默认（不写CSS，浏览器有默认） < External < Internal < Inline

2.CSS选择器

2.1 * 全元素选择器
* {
  color: blue;
}
将所有元素文字颜色设置为蓝色,一般不会用到

2.2 element 元素选择器
p {
 color: blue;
}
将元素p文字颜色设置为蓝色

2.3 #id id选择器
<li id="li-ca">CA</li>

#li-ca {
 color: blue;
}
将id为li-ca的元素字体颜色设置为蓝色

所有的HTML元素的global attribute（所有元素都有的属性）都可以指定一个id，可以通过id选择器选择

2.4 . class选择器

2.5 Combinator 组合选择器

2.5.1 element1 element2 后代选择器
div p {
  background-color: yellow;
}
element1和element2之间加空格选择属于element1后代的element2

2.5.2 element1 > element2 子选择器

element1和element2之间加大于号子属于后代的一种，与父直接挨着的后代为子

2.5.3 element1,element2 并集选择器
div,p {
  color: red;
}
element1和elemen2之间加逗号同时选择多个元素

ha_soga

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 的创建和选择器

英文全称： Cascading Style Sheets，层叠样式表。对HTML中元素进行排版。1.在HTML中添加CSS1.1 Inline Styles<h1 style="color : blue;">This is a heading</h1>上边的 style="color : blur;"就是插入的CSS，适用于稍微简单，没有那么复杂的CSS直接作用在想要作用的元素上，优先级最高。1.2 Internal Style<he
复制链接

扫一扫