CSS

文章目录

基本介绍

Cascading Style Sheets:层叠样式表

h1 {color:blue;font-size:12px;}

一个CSS规则由一个选择器（要定义的HTML元素）和一个声明块（包含一个或多个声明）组成。

CSS插入样式种类

CSS有三种插入样式表的方法：内联CSS、内部CSS和外部CSS。

内联CSS

也称之为内联样式，又称行内样式。

<p style="color:red;">
    今天我们一起学习CSS。
</p>

标签直接作为选择器用
最后一个样式声明可以不用添加分号

内部CSS

内部样式表一般定义在head元素里，通过style元素定义，页面样式声明均需要添加在style元素内部。

CSS选择器：用来寻找或选择你想要定义样式的HTML元素。

元素选择器：根据元素名称选择HTML元素
```
body {
    background-color: linen;
}
```
margin-left用于定义元素位于父容器左侧的距离。

外部CSS

也叫外部样式，通过改变一个文件改变整个网站的外观。

将样式代码放在以.css为后缀名的文件，使html页面结构文件和css样式文件完全独立开来。

<head>
    <link rel="stylesheet" href="mystyle.css"
</head>

设置对外部样式表文件的引用

样式规范：

选择器和花括号之间用一个空格隔开
每一条样式声明语句单独一行定义，两组样式定义用空行分隔

CSS样式表优先级

当一个HTML元素有一个以上的样式时，作用优先级如下：

在一个HTML元素内，内联样式优先级最高，会覆盖外部样式和内部样式以及浏览器默认样式
在head里添加的内部样式和引入的外部样式，后添加和引入的优先级高
浏览器默认的样式优先级最低

CSS选择器

用来寻找或选择想要定义样式的HTML元素。

简短选择器：根据名称、ID、类别来选择元素
组合选择器：根据元素之间的特定关系来选择元素
伪类选择器：根据某种状态来选择元素
伪元素选择器：为一个元素的指定部分设置样式
属性选择器：根据一个属性或属性值来选择元素

简单选择器

元素选择器：根据元素名称来选择HTML元素。

ID选择器：使用一个HTML元素的id属性来选择一个特定的元素。（一个元素的id在一个页面是唯一的）。要选择一个有特定id的元素，写#字符加该元素的id。id名称不能以数字开头。

#para2 {
    text-align:center;
}

<p id="para2">
    ID选择器：使用一个HTML元素的id属性来选择一个特定的元素。（一个元素的id在一个页面是唯一的）。要选择一个有特定id的元素，写#字符加该元素的id。
</p>

类选择器：可以选择具有特定class属性的HTML元素。需要写一个点字符后面紧跟类别名称，例如.italic

class属性可以实现多个样式叠加。如：class="italic deco"用空格隔开

class名称不能以数字开头
分组选择器：选择具有所有相同样式的HTML元素。将多个选择器用多个逗号分隔。如：
```
h1,p{
    font-style:italic;
}
```
通用选择器：选择页面上所有的HTML元素。

定义选择器的方法是使用通配符星号（*）。

* {
   background-color:yellow;
}

组合选择器

通过一些特殊符号将多个简单选择器连接起来。

后代选择器：通过空格连接，匹配作为指定元素后代的所有元素。

例如选择<div>元素内的所有<p>元素：
```
div p{
      
       
    color:blue;
}
```
子选择器：通过>连接。只能选择作为某元素的子元素，不能选择到孙辈的元素。

例如选择div的所有子元素p：
```
div>p{
   background-color:yellow
}
```
相邻的兄弟选择器：通过+连接。（CSS3）
一般兄弟选择器，通过~连接。（CSS3）

伪类选择器

属于类选择器的一种，根据特定状态选取元素。可以用于定义鼠标各种行为产生的效果。常用伪类选择器：

鼠标点击前 :link代表鼠标没有操作元素时元素的默认样式
鼠标点击后:visited代表鼠标点击并离开元素之后的样式
鼠标悬停时:hover代表鼠标悬停时或者是划过元素时元素的样式
鼠标点击时:active代表鼠标点击元素瞬间的样式

例：(其中selector为其他基础选择器)

selector:鼠标行为{
   color:red;
}

注意：

冒号和后面的鼠标行为，没有任何空格，必须连接在一起；
四个伪类选择器必须按照以上介绍的顺序书写（:link,:visited,:hover,:active)，否则在浏览器中部分样式不能实现；
伪类选择器全部一起使用的情况，主要是应用在超链接上，偶尔也会独立使用在其他标签上面。

伪元素选择器

通过伪元素选择器，可以设置元素指定部分的样式。主要用来设置元素内文本的首字母、首行的样式，或是在元素内容之前或之后插入其他内容。

selector::pseudo-element{
   color:red;
   font-size:30px;
}

其中selector为目标元素，::pseudo-element代表向目标元素内，添加伪元素，并对伪元素内容进行修饰。

伪元素共有五种：

::first-letter：向文本的首个字符添加特殊样式。
::first-line：向文本的首行添加特殊样式。
::before：用来实现在元素内容之前插入内容。
::after：用来实现在元素内容之后插入内容。
::selection：用来更改选中文本的样式。

selection伪元素选择器只支持以下几个样式声明：color(文本颜色)，background（背景），cursor(鼠标样式)，outline（描边效果）

div::first-letter{
    color:blue;
    font-size:30px;
}

在使用伪元素选择器向前向后插入内容时，必须配合content才能实现效果，向前向后插入进来的内容，都需要符合CSS样式声明的基本语法。

div::after{
    
    
  content:"向后添加的文字";
  font-size:30px;
}

CSS属性选择器

想做到更加精准的查找，可以使用CSS属性选择器来完成。它是根据属性或属性值来查找元素。

Element[attribute]或 ELement[attribute="value"],含义为查找带有该属性的元素，然后添加样式声明。

例如，查找带有target属性的a元素，并且为a元素添加背景颜色为黄色的样式声明：

a[target] {
    background-color:yellow;
}

CSS选择器的4种属性：

[attribute]:来查找HTML结构中，带有attribute属性的所有元素。
[attribute="value"]:来查找HTML结构中，带有attribute属性，并且属性值为value的元素。
[attribute~="value"]:来查找HTML结构中，带有attribute属性，并且在多个属性值中包含value的元素。
[attribute|="value"]：来查找HTML结构中带有attribute属性，并且属性值以value或者是value-开头的元素。
[attribute^=value]:例 a[href^="https"]选择其href属性值以”https“开头的每个<a>元素
[attribute$=value]:例 a[href$=".pdf"]选择其href属性值以”.pdf“结尾的每个<a>元素
[attribute*=value]:例 a[href*="w3school"]选择其href属性值包含子串"w3school"的每个<a>元素

注意，该属性的值只能有一个，不能有多个。

例如：

[type] {
    
    
    width:50px;
    height:50px;
}

[name="sex"] {
    
    
    width=20px;
    height:20px;
}

[class~="box"] {
    
    
    background-color:yellow;
}

[class|="box"] {
    
    
    background-color:blue;
}

选择器总结

简单选择器和组合选择器，可以完成元素的查找。
其他选择器可以更加精准高效的查找元素，从而能提高我们编码速度。
属性选择器，在实际开发的过程中，大部分会应用在表单控件中，因为表单控件可添加的属性比较多。

CSS文本样式

CSS文本颜色和大小写转化

通过声明color属性来设置文本颜色，值可以是颜色名称、十六进制颜色值或RGB颜色值

如：

body {
    
    
    color:rgb(160,32,240);
}

一个页面的默认文本颜色是在body选择器中定义的。

CSS强制转换文本中，单词和字母的大写和小写：使用text-transform属性来实现这个功能。它的值有三个。

uppercase:文本被转换为大写
lowercase:文本被转换为小写
capitalize:每个单词的首字母被转换为大写

注意，这个属性主要用来设置英文的文本，对中文无效。

p.transform {
    
    
   text-transform:uppercase;
}

CSS文本对齐方式和文本间距

文本水平对齐

通过text-align属性实现，有三个值：left（水平居左）、right（水平居右）、center（水平居中）。

当 text-align属性被设置为justify时，每一行都被拉长，使每一行都有相等的宽度，并且左右边界对齐。

文本垂直对齐

通过声明 vertical-align属性实现。其值有五个：

baseline:基线对齐(基于四线三格倒数第二行对齐，对于英文文本才有意义)
text-top:文本顶部对齐
text-bottom：文本底部对齐
sub:下角标对齐
super:上角标对齐

设置文本间距

文本缩进：通过 text-indent属性实现，使用长度值或百分比来设置文本缩进。长度值可以使用绝对单位（px，比如缩进50px）或相对单位（em，缩进宽度为字符宽度（如果为中文即font-size)的倍数，一般设置为2em，即空两格）。
文本空隙：letter-spacing属性用于指定中文文字或英文字母之间的空隙
行高：line-height属性用于指定行与行之间的高度，也就是行高（两行文本基线的距离）。

由上图可知：line-height=1即没有行距

属性值：
- normal:也是默认值，浏览器会根据字符大小自动设置一个行高。
- 一个数字：比如1.5，此数字与当前的字符大小相乘计算得到。
- 绝对值：比如20px，-5px，设置固定的行间距。
文本单词间距：word-spacing属性，只对英文有效。
white-spacing属性指定了如何处理元素内部的空白。值 nowrap不管包含文本的元素宽度是多少，文本都不会换行，直到遇见 <br>标签为止。

CSS文本修饰

text-decoration-line为文本添加装饰线。具体的值有：
- overline：在文本上方添加线条修饰
- line-through：在文本中间添加线条修饰
- underline：在文本下方添加线条修饰
可以同时给文本添加多个线条，实现方法是给该属性添加多个值，每个值通过空格分开。
```
p {
      
      
   text-decoration-line: overline underline;
}
```
添加了超链接的文本不要使用underline下划线（默认有一条）。

装饰线的颜色通过 text-decoration-color设置，属性值为任意合法颜色。

为装饰线指定风格通过 text-decoration-style属性实现，属性值有五个：
- solid实线
- double双实线
- dotted圆点线
- dashed虚线
为线条设置粗细：text-decoration-thickness
- auto：默认值
- px：像素大小，是一个绝对值
- %：是一个相对值
简略写法：text-decoration。它的值通过空格分隔。
```
h4 {
      
      
    text-decoration: underline red double 5px;
}
```
其中，text-decoration-line必须设置，其他三个可选
```
h2 {
      
      
    text-decoration: underline red;
}
```
表示给文本设置下划线装饰，线条颜色为红色，其他修饰属性都为默认值。

四个属性值的顺序没有要求。

如果要取消链接自带的下划线，可以这样写：
```
a{
      
      
    text-decoration:none;
}
```
CSS字体和字号

在CSS中，使用 font-family属性指定一个文本的字体。属性值是一个字体的名称。

英文字体：
1. Serif(有衬线字体)：每个字母的边缘都有一个小笔画，创造一种正式和优雅的感觉。例如Times New Roman、Georgia、Garamond。
2. Sans-serif（无衬线字体）：创造了一种现代和简约的外观。例如：Arial、Verdana、Helvetica。
3. Monospace：单空格字体，又叫等宽字体，它们创造一种机械的外观，一般在代码编辑器中会使用到。例如：Courier New、Lucida Console、 Monaco。

在这里插入图片描述

Cursive：草书字体，模仿人类的手写体。

在这里插入图片描述

Fantasy：装饰性、娱乐性字体。

在这里插入图片描述

在中文网站上比较常用的字体：微软雅黑和苹方简，分别用于Windows系统和Mac系统。

在这里插入图片描述

如果用户电脑里没有某种字体，可以事先提供几种样式备选：

h3 {
    
    
   font-family:"Courier New","BrushScript MT",Cooperplate;
}

先定义的字体优先起作用，如果字体都不存在，浏览器就使用默认字体。

文本字号也就是文本大小，可以使网页文本布局有层次感，便于阅读。

利用 font-size设置，属性值可以是绝对大小（设置为指定大小，不允许用户在浏览器中改变），也可以是相对大小（相对于周围元素大小，em或%）。

rem相对单位：相对于根元素，即html。

html {
    
    
   font-size:16px;
}

p {
    
    
    font-size:2rem;
}

CSS字体风格和字体样式的简写

通过CSS可以设计文本倾斜、文本粗细以及文本大小写等字体风格。

font-style属性主要用于指定斜体文本，有三个值：

normal：文本正常显示
italic：文本斜体显示
oblique：与italic相似，但浏览器支持度较低

font-weight指定字体粗细，属性值两种形式：

名称：lighter（细体）、normal（正常字体）、bold（加粗字体）、bolder（更粗字体）
数值：100、200…900 （值越大，文本越粗）

font-variant指定文本是否应以小型大写字符显示，即小一号的大写字母。

在这里插入图片描述

有两个值 normal和small-caps，后者表示设置小型大写字母

font指定所有单独的字体属性。

p {
    
    
    font: oblique 100 small-caps 30px/30px 华文仿宋;
}

CSS谷歌字体和icon图标

CSS除了使用标准字体外，还可以使用谷歌字体，谷歌字体免费使用，有1000多种可供选择。

例：

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide|Sofia">

|用来分隔多种字体。

icon字体图标，它的强大之处在于可以将这个图标当成文本，任意的添加样式。

常用icon图标网站： fontawesom.com、www.iconfont.cn

CSS选择器的权重

优先级：行内样式>ID选择器＞类选择器>元素选择器>通用选择器

p {
    
    
    color:purple;
}

div p {
    
    
    color:green;
}

.box p {
    
    
    color:orange;
}

#box p {
    
    
    color:red;
}

div#box p{
    
    
    color:blue;
}

在上面的例子中，所有的选择都在针对p元素，设定他的文字颜色。这些选择器之间也是冲突的，这个时候浏览器会根据选择器的权重值来判断，谁的权重值高谁生效：

	选择器	例子	权重值
1	通用选择器	*	0
2	元素选择器	h1,div,p	1
3	类选择器	.acitve,.light	10
4	ID选择器	#box,#btn	100
5	行内选择器	`<h1 style="...">`	1000

多个选择器权重相加：

#box p .light{
    
    
    /* 100 + 1 + 10 = 111 */
    color:red;
}

选择器选择的范围越小，越精确，优先级就越高。

CSS边框

边框样式

border-style属性定义边框样式：

dotted：定义一个点状的边框。
dashed：定义一个虚线边框。
solid：定义一个实线边框
double：定义一个双倍的边框
none：定义无边框
hidden：定义一个隐藏的边框

当表格单元格边框产生冲突时，优先级：border-style:hidden>border-style:solid>border-style:none

若要控制一个单独方位的边框线，可以在 border-style中间加入一个表示方位的词，如 border-right-style。

在这里插入图片描述

简写方法：按照上边、右边、下边、左边的顺序来写。

如：border-style:dotted solid double dashed;。

或是按照上边、左右边、下边的顺序。

如：border-style:dotted solid double;。

或是按照上下边、左右边的顺序。

如：border-style:dotted solid;。

如果一个值，就表示四个边框样式相同。

如：border-style:dotted;。

边框宽度

border-width，值以px、em等为单位。

或者是三个预定义的值：thin（薄）、medium（中）、thick（厚）。

给四个边框设置不同宽度：border-width:5px 10px 15px 20px;。

边框宽度也可以使用混合简写的方法。

边框颜色

border-color,值可以使用颜色名称、十六进制颜色值或者RGB颜色值，也可以使用transparent设置透明。

如：border-color:red green blue yellow;

边框颜色的值也可以使用混合简写的方法。

速记属性

和字体font一样，边框也可以使用速记属性，可以在一个border属性中指定border-style、border-width、border-color等单独的边框属性。

如：border:5px solid red;

表示设置元素边框宽度为5像素，边框样式为实线，边框颜色为红色。

注意：border-style必须写出，其他两个属性可省略，省略后默认使用1像素、黑色线。

也可以单独定义某条边的属性，如：border-top、border-left。

注意：样式中给元素设置的宽高，是不包含元素边框宽高的，它只包含元素内容的宽高。

web前端开发入门之CSS总结（上）

CSS

文章目录

基本介绍

CSS插入样式种类

内联CSS

内部CSS

外部CSS

CSS样式表优先级

CSS选择器

简单选择器

组合选择器

伪类选择器

伪元素选择器

CSS属性选择器

选择器总结

CSS文本样式

CSS文本颜色和大小写转化

CSS文本对齐方式和文本间距

文本水平对齐

文本垂直对齐

设置文本间距

CSS文本修饰

CSS字体和字号

CSS字体风格和字体样式的简写

CSS谷歌字体和icon图标

CSS选择器的权重

CSS边框

边框样式

边框宽度

边框颜色

速记属性

猜你喜欢