css基本介绍

时间 2019-12-08

标签 css 基本介绍栏目 CSS 繁體版

原文原文链接

目录css

CSS初识

CSS(Cascading Style Sheets)一般被称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。它就是包含一个或多个规则的文本文件。html

构造规则

样式表的每一个规则都有两个部分，即选择器(selection)和声明(declaration)。
浏览器

注意

选择器用于指定CSS样式做用的HTML对象，花括号内是对该对象设置的具体样式。
属性和属性值以“键值对”的形式出现。
属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。
属性和属性值之间用英文“:”链接。
多个“键值对”之间用英文“;”进行区分。

咱们也能够在样式规则中用/*注释内容*/语法来注释内容。另外，样式会被该元素的后代继承，不过浏览器在解析代码时，只会解析离它最近的样式。布局

样式表的定义和使用

行内式（内联样式）

基本语法：字体

<label style="样式属性:属性值;样式属性:属性值;···">

内部样式表

基本语法：url

<head>
<style type="text/CSS">
    选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>

外部样式表（外链式）

基本语法：code

<head>
  <link href="CSS文件的路径" type="text/CSS" rel="stylesheet" />
</head>

说明：htm

type：定义所连接文档的类型，在这里须要指定为“text/CSS”，表示连接的外部文件为CSS样式表
rel：定义当前文档与被连接文档之间的关系，在这里须要指定为“stylesheet”，表示被连接的文档是一个样式表文件
link：该标签是一个单标签

或者：对象

<style type="text/css">
    @import url("外部样式表的文件名称")
</style>

选择器

标签选择器（元素选择器）

标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }  或者
元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

类选择器

.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

不过咱们必须在标签里面以下定义：blog

<label class="类名"></label>

id选择器

#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}

不过咱们也要在标签里面以下定义：

<label id="id名"></label>

通配符选择器

* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}

通配符选择器用“*”号表示，它是全部选择器中做用范围最广的，能匹配页面中全部的元素。

伪类选择器

伪类选择器用于向某些选择器添加特殊的效果。好比给连接添加特殊效果，好比能够选择第1个，第n个元素。

连接伪类选择器

:link：未访问的连接
:visited：已访问的连接
:hover：鼠标移动的连接上
:active：选定的连接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    a:hover{
        color: red;
    }
</style>
<body>
<a href="http://www.baudu.com/">百度</a>
</body>
</html>

结构（位置）伪类选择器

:first-child:选取属于其父元素的首个子元素的指定选择器
:last-child:选取属于其父元素的最后一个子元素的指定选择器
:nth-child(n)：匹配属于其父元素的第 N 个子元素，不论元素的类型
:nth-last-child(n)：选择器匹配属于其元素的第 N 个子元素的每一个元素，不论元素的类型，从最后一个子元素开始计数

目标伪类选择器

:target目标伪类选择器 :选择器可用于选取当前活动的目标元素

复合选择器

交集选择器

咱们直接把须要交集的选择器连在一块儿，如：

<style>
    p.class#id{
        ...
    }
</style>

并集选择器

在选择器的中间加上逗号：

<style>
    p,.class,#id{
        ...
    }
</style>

后代选择器

后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。

<style>
    p .class #id{
        ...
    }
</style>

子元素选择器

子元素选择器只能选择做为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 >进行链接，注意，符号左右两侧各保留一个空格。

<style>
    .demo > h3 {color: red;}
</style>

属性选择器

选取标签带有某些特殊属性的选择器咱们成为属性选择器

/* 获取到 拥有 该属性的元素 */
div[class^=font] { /*  class^=font 表示 font 开始位置就好了 */
            color: pink;
        }
div[class$=footer] { /*  class$=footer 表示 footer 结束位置就好了 */
            color: skyblue;
        }
div[class*=tao] { /* class*=tao  *=  表示tao 在任意位置均可以 */
            color: green;
        }

伪元素选择器

E::first-letter文本的第一个单词或字（如中文、日文、韩文等）
E::first-line文本第一行；
E::selection可改变选中文本的样式；
E::before和E::after：在E元素内部的开始位置和结束位建立一个元素，该元素为行内元素，且必需要结合content属性使用；

标签选择模式

块级元素(block-level)

每一个块元素一般都会独自占据一整行或多整行，能够对其设置宽度、高度、对齐等属性，经常使用于网页布局和网页结构的搭建。
特色：

独占一行
高度，行高、外边距以及内边距均可以控制
宽度默认是容器的100%
能够容纳内联元素和其余块元素

行内元素(inline-level)

行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，通常不能够设置宽度、高度、对齐等属性，经常使用于控制页面中文本的样式。
特色：

和其余行内元素会在一行
高、宽无效，但水平方向的padding和margin能够设置，垂直方向的无效
默认宽度就是它自己内容的宽度
行内元素只能容纳文本或则其余行内元素。（a特殊）

行内块元素（inline-block）

在行内元素中有几个特殊的标签如<img>、<input>、<td>，能够对它们设置宽高和对齐属性，咱们称它们为行内块元素。
特色：

和相邻行内元素（行内块）在一行上,可是之间会有空白缝隙
默认宽度就是它自己内容的宽度
高度，行高、外边距以及内边距均可以控制

标签显示模式转换`display`

display:inline：块转行内
display:block：行内转块
display: inline-block：块、行内元素转换为行内块

CSS三大特性

层叠性

这是浏览器处理冲突的一个能力,若是一个属性经过两个选择器设置到同一个元素上，那么这个时候一个属性就会将另外一个属性层叠掉。通常状况下，若是出现样式冲突，则会按照CSS书写的顺序，以最后的样式为准。

继承性

所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素便可。

优先性

定义CSS样式时，常常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题：
继承样式的权重为0。即在嵌套结构中，无论父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。
行内样式优先。应用style属性的元素，其行内样式的权重很是高，能够理解为远大于100。总之，他拥有比上面提升的选择器都大的优先级。
权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具备最大的优先级，或者说排在最后的样式优先级最大。
CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说无论权重如何以及样式位置的远近，!important都具备最大优先级。

特殊性(Specificity)

关于CSS权重，咱们须要一套计算公式来去计算，这个就是 CSS Specificity，咱们称为CSS 特性或称非凡性，它是一个衡量CSS值优先级的一个标准具体规范入以下：
specificity用一个四位的数字串(CSS2是三位)来表示，更像四个级别，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。
且数位之间没有进制好比说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0，因此不会存在10个div能遇上一个类选择器的状况。

继承或者* 的贡献值	0,0,0,0
每一个元素（标签）贡献值为	0,0,0,1
每一个类，伪类贡献值为	0,0,1,0
每一个ID贡献值为	0,1,0,0
每一个行内样式贡献值	1,0,0,0
每一个!important贡献值	∞ 无穷大

优先总结：

使用了 !important声明的规则。
内嵌在 HTML 元素的 style属性里面的声明。
使用了 ID 选择器的规则。
使用了类选择器、属性选择器、伪元素和伪类选择器的规则。
使用了元素选择器的规则。
只包含一个通用选择器的规则

1. CSS基本知识介绍
2. CSS基础介绍
3. CSS基本样式简单介绍
4. HTML/CSS基础与介绍
5. css基本概念与css核心语法介绍
6. Kafka 基本介绍
7. Hive基本介绍
8. quartz基本介绍
9. VUEX基本介绍?
10. ipfs基本介绍
更多相关文章...
• 网站主机介绍 - 网站主机教程
• Lua 基本语法 - Lua 教程
• Java Agent入门实战（一）-Instrumentation介绍与使用
• Kotlin学习（二）基本类型