CSS 基础选择器与三种引入方式

时间 2019-11-19

标签 css 基础选择器三种引入方式栏目 CSS 繁體版

原文原文链接

基础选择器

选择器：css 选择 html 标签的一个工具，是将 css 与 html 创建起联系，那么 css 就能够控制 html 样式
选择器其实就是给 html 标签起名字

标签选择器

做用：根据指定的标签名称，在当前界面中找到全部该名称的标签，而后设置属性css
格式：html
```
标签名称 {
    属性: 值;
}
```
注意点：前端
- 标签选择器选中的是当前界面中全部的标签，而不能单独选中某一个标签
- 标签选择器不管标签藏得多深都能选中

id选择器

做用：根据指定的 id 名称找到对应的标签，而后设置属性工具
格式：code
```
#id名称 {
    属性: 值;
}
```
注意点：htm
- 每一个 HTML 标签都有一个属性叫作 id，也就是说每一个标签均可以设置 id
- 在同一个界面中 id 的名称是不能够重复的
- 在编写 id 选择器时必定要在 id 名称前面加上 #
- id 的名称是有必定的规范的
- id 的名称只能由字母、数字、下划线组成（a-z 0-9 _）
- id 名称不能以数字开头
- id 名称不能是 HTML 标签的名称，不能是（a h1 img input ...）
- 在企业开发中通常状况下若是仅仅是为了设置样式，咱们不会使用id，由于在前端开发中 id 通常留给 js 使用的

类选择器

做用：根据指定的类名称找到对应的标签，而后设置属性开发
格式：input
```
.类名 {
    属性: 值;
}
```
注意点：class
- 每一个 HTML 标签都有一个属性叫作 class，也就是说每一个标签均可以设置类名
- 在同一个界面中 class 的名称是能够重复的
- 在编写 class 选择器时必定要在 class 名称前面加上.
- 类名的命名规范和 id 名称的命名规范同样
- 类名就是专门用来给 CSS 设置样式的
- 在 HTML 中每一个标签能够同时绑定多个类名

CSS三种引入方式

行间式

<div style="width: 100px; height: 100px">

</div>
<!-- 简单直接,针对性强 -->

样式书写在标签的 style 全局属性中
样式格式为key: value(单位)
以;隔开多个样式，最后的;能够省略

内联式

<head>
    <style>
        选择器 {
            width: 100px; 
            height: 100px;
        }
    </style>
</head>
<!-- 解耦合了,可读性强 -->

样式书写在 head 标签内的 style 标签中
样式格式为选择器 { 样式块 }
样式块key: value(单位)

外联式

/* index.css文件 */
选择器 {
    width: 100px; 
    height: 100px;
}
/* 适合团队高效率开发, 耦合性低, 复用性强 */

<!-- index.html -->
<link rel='stylesheet' type='text/css' href='./index.css'>

样式书写在外部 css 文件中，不须要写任何标签
样式格式为选择器 { 样式块 }
样式块key: value(单位)
以;隔开多个样式，最后的;能够省略

三种引入"优先级"分析

1. 没有优先级
2. 不一样的属性样式协同操做,相同的样式采用覆盖机制,选择逻辑最下方的
3. 行间式必定是逻辑最下方的样式

相关文章

相关标签/搜索

Pipelines选择器

CSS选择器Level-4

CSS选择器世界

浏览器信息

Docker命令大全

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公众号

欢迎关注本站公众号,获取更多信息

相关文章

>>更多相关文章<<