您的位置: 首页  >  IT文章  >  CSS CSS介绍 CSS三种引入方式 样式与长度颜色 AABBCC：六个十六进制位，每两位一整体，分别代表Red、Green、Blue，可以简写#abc 常用样式 CSS选择器

CSS CSS介绍 CSS三种引入方式 样式与长度颜色 AABBCC：六个十六进制位，每两位一整体，分别代表Red、Green、Blue，可以简写#abc 常用样式 CSS选择器

分类: IT文章 • 2022-03-22 13:35:35

CSS CSS介绍 CSS三种引入方式 样式与长度颜色 AABBCC：六个十六进制位，每两位一整体，分别代表Red、Green、Blue，可以简写#abc 常用样式 CSS选择器

我们为什么需要CSS?

使用css的目的就是让网页具有美观一致的页面，另外一个最重要的原因是内容与格式分离 在没有CSS之前，我们想要修改HTML元素的样式需要为每个HTML元素单独定义样式属性，当HTML内容非常多时，就会定义很多重复的样式属性，并且修改的时候需要逐个修改，费心费力。是时候做出改变了，所以CSS就出现了。

CSS的出现解决了下面两个问题：

1、将HTML页面的内容与样式分离。
2、提高web开发的工作效率。

什么是CSS?

CSS是指层叠样式表(Cascading Style Sheets)，样式定义如何显示HTML元素，样式通常又会存在于样式表中。也就是说把HTML元素的样式都统一收集起来写在一个地方或一个CSS文件里。

css的优势

1.内容与表现分离 2.网页的表现统一，容易修改 3.丰富的样式，使页面布局更加灵活 4.减少网页的代码量，增加网页浏览器速度，节省网络带宽 5.运用独立页面的css,有利于网页被搜索引擎收录

如何使用CSS？

我们通常会把样式规则的内容都保存在CSS文件中，此时该CSS文件被称为外部样式表，然后在HTML文件中通过link标签引用该CSS文件即可。这样浏览器在解析到该link标签的时候就会加载该CSS文件，并按照该文件中的样式规则渲染HTML文件。

CSS三种引入方式

一、三种方式的书写规范

1、行间式

<div style=" 100px; height: 100px;  color: rgb(17, 119, 0);">></div>

2、内联式

<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>

3、外联式

file: zero.css
div {
    width: 100px;
    height: 100px;
    background-color: red;
}
file: zero.html
<head>
    <link rel="stylesheet" type="text/css" href="css/zero.css" />
</head>

二、三种方式间的"优先级"

  • 与样式表的解析顺序有关

样式与长度颜色

1、基本样式

<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>

2、长度

px：像素(pixel)，屏幕上显示的最小单位，用于网页设计，直观方便

mm：毫米

cm：厘米

in：英寸

pt：点(point)，一个标准的长度单位，1pt＝1/72in，用于印刷业，非常简单易用；

em：相当长度，通常1em=16px，应用于流式布局

3、颜色

rgb()：三个值可为[0-255]数值或百分比，以,相隔（r:Red g:Green b:Blue）

rgba()：前三个值可为像素或是百分比，最后一个为[0, 1]数值，以,相隔（r:Red g:Green b:Blue a:Alpha）

hsl()：第一个值为[0,360]数值，后二个值可为百分比，以,相隔（h:Hue s:Saturation l:Lightness）

hsla()：第一个值为[0,360]数值，中间二个值可为百分比，最后一个为[0, 1]数值，以,相隔（h:Hue s:Saturation l:Lightness a:Alpha）

  • AABBCC：六个十六进制位，每两位一整体，分别代表Red、Green、Blue，可以简写#abc

常用样式

1、字体样式

font-family：字体族科，多值用于备用，以,隔开

font-family: "STSong", "Arial";
font-size：字体大小

font-style： 字体风格 normal | italic | oblique

font-weight：字体重量 normal | bold | lighter | 100~900

line-height：行高

font：字重 风格 大小/行高 字族

2、文本样式

  • color：文本颜色

  • text-align：横向排列

left 居左 | center 居中 | right 居右

  • vertical-align：纵向排列

baseline：将支持valign特性的对象的内容与基线对齐 
sub：垂直对齐文本的下标 
super：垂直对齐文本的上标 
top：将支持valign特性的对象的内容与对象顶端对齐 
text-top：将支持valign特性的对象的文本与对象顶端对齐 
middle：将支持valign特性的对象的内容与对象中部对齐 
bottom：将支持valign特性的对象的文本与对象底端对齐 
text-bottom：将支持valign特性的对象的文本与对象顶端对齐

  • text-indent：字体缩减

  • text-decoration：字划线

  • letter-spacing：字间距

  • word-spacing：词间距

  • word-break：自动换行

normal：默认换行规则
break-all：允许在单词内换行

3、背景样式

  • background-color：颜色

  • background-image：图片

background-image: url(bg.png);

  • background-repeat：重复

repeat | no-repeat | repeat-x | repeat-y

  • background-position：定位

top | bottom | left | right | center
定位值可为方位词、百分比及固定值，值个数默认为两位(水平/垂直)，一个值时垂直默认center

  • background-attachment：滚动模式

scroll | fixed
父级设置属性，子集内容超出父级范围

CSS选择器

一、基础选择器

1、通配选择器

* {
    border: solid;
}
匹配文档中所有标签：通常指html、body及body中所有显示类的标签

2、标签选择器

div {
    background-color: yellow;
}
匹配文档中所有与标签名匹配的标签：如div{}会匹配文档中全部div，span{}会匹配文档中所有span

3、类选择器

.red {
    color: red;
}
匹配文档中所有拥有class属性且属性值为red的标签：如<sup class="red"></sup> <sub class="red"></sub>均会被匹配

4、id选择器

#div {
    text-align: center;
}
匹配文档中所有拥有id属性且属性值为div的标签：如<div ></section>均会被匹配

二、基础选择器优先级

基础选择器优先级大致与选择器匹配范围成反比，匹配范围越小，优先级越高

基础选择器优先级大致与选择器匹配精度成正比，匹配精度越高，优先级越高

基础选择器优先级：id选择器 > 类选择器 > 标签选择器 > 通配选择器
id选择器必须保证单文档的唯一性

三、组合选择器

1、群组选择器

div, span, .red, #div {
    color: red;
}

  • 一次性控制多个选择器

  • 选择器之间以,隔开，每一个选择器位均可以为任意合法选择器或选择器组合

2、子代(后代)选择器

子代选择器用>连接
body > div {
    color: red;
}
后代选择器用空格连接
.sup .sub {
    color: red;
}

  • 一次性控制一个选择器(逻辑最后的那个选择器)，前置位的选择器为修饰性选择器

  • 每一个选择器位均可以为任意合法选择器或选择器组合

  • 子代选择器必须为一级父子嵌套关系，后代选择器可以为一级及多级父子嵌套关系

3、相邻(兄弟)选择器

相邻选择器用+连接
.d1 + .d2 {
    color: red;
}
兄弟选择器用~连接
.d1 ~ .d3 {
    color: red;
}

  • 一次性控制一个选择器(逻辑最后的那个选择器)，前置位的选择器为修饰性选择器

  • 每一个选择器位均可以为任意合法选择器或选择器组合

  • 相邻选择器必须为直接相邻关系，兄弟选择器可以为直接相邻或间接相邻关系

4、交集选择器

<div class="d" ></div>
div.d#dd {
    color: red;
}
​
<div class="d1 d2 d3"></div>
.d1.d2.d3 {
    color: red;
}

四、组合选择器优先级

  • 组合选择器优先级与权值相关，权值为权重和

  • 权重对应关系

选择器 权重
通配 1
标签 10
类、属性 100
id 1000
!important 10000

  • 选择器权值比较，只关心权重和，不更新选择器位置

  • 不同级别的选择器间不具备可比性：1个类选择器优先级高于n个标签选择器的任意组合

五、属性选择器

  • [attr]：匹配拥有attr属性的标签

  • [attr=val]：匹配拥有attr属性，属性值为val的标签

  • [attr^=val]：匹配拥有attr属性，属性值以val开头的标签

  • [attr$=val]：匹配拥有attr属性，属性值以val结尾的标签

  • [attr*=val]：匹配拥有attr属性，属性值包含val的标签

相关推荐