企业官网建设流程全解析

CSS简介

css全称：层叠样式表

css也是一种标记语言，用于给HTML结构设置样式 eg：文字大小、颜色、元素宽高等

CSS的编写位置

位置1_行内样式

写在style中，又称内联样式

<h1 style="color: 颜色;font-size: 60px;"></h1> 颜色的英文可以大写，也可小写

行内样式表，智能控制当前的标签样式

CSS语法规范：名：值；

位置2_内部样式

​ ​ <style> h1{ color: aqua; font-size: 60px; } h2{ color: brown; font-size: 40px; } p{ color: yellowgreen; font-size: 80px; } img{ width: 200px; } </style> ​ ​

可以放在任何地方，但一般放在head中

位置3_外部样式

要写单独的.css文件，在HTML中引入使用

1.在.css中：

h1{ color: aqua; font-size: 60px; } h2{ color: brown; font-size: 40px; }

2.在HTML中引入.css文件：

<link rel="stylesheet" href="./position3.css">

<link>要写在<head>中

CSS样式表优先级

优先级

优先级规则：行内样式>内部样式=外部样式

优先级相同时：后来者居上

同一个样式中也是后来者居上

CSS语法规范

语法规范

由选择器和声明块组成（声明块由一个或多个声明组成）

声明格式：属性名：属性值；

注释：/*内容*/ 快捷键：Ctrl+/

CSS代码风格

代码风格

1.展开风格

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

2.紧凑风格

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

CSS基本选择器

通配选择器

可以选中所有HTML元素

* { color: red; font-size: 40px; }

元素选择器

为页面中某种元素统一设置样式

h2{ color: aqua; } p{ color: blue; } h1{ color: blueviolet; font-size: 50px; }

类选择器

根据元素的class值来选中某些元素

.speak{ color: red; } .answer{ color: green; } .big{ font-size: 50px; }

class可以写多个值，但要用空格隔开

<p class="speak big">

ID选择器

id不能数字开头 一个元素只能有一个id值 多个元素id值不能重复

一个元素可以同时拥有id和class

#earthy{ color: red; } #turn_earthy{ color: blue; }

CSS复合选择器

交集选择器

交集选择器中不可能存在两个元素选择器

p.beauty{ color: green; }

并集选择器

又称分组选择器

#suxi, .beauty, .dog, .pig, .rich{ font-size: 40px; background-color: pink; width: 180px; }

后代选择器

先写祖先，再写后代

ul li{ color: red; } ol li{ color: greenyellow; } ul li a{ color: aqua; } ol li a{ color: blue; } .sj li{ color: black; }

子代选择器

语法：选择器1>选择器2>选择器3

​ ​ div>a { color: red; } div>p>a{ color: blue; } .foot>a{ color: rgb(30, 210, 99); } ​ ​

兄弟选择器

相邻兄弟选择器

与指定元下方紧邻的元素（下方）

语法：选择器1+选择器2{}

div+p{ color: red; }

通用兄弟选择器

指定元素后方符合的所有元素

语法：选择器1~选择器2{}

div~p{ color: blue; }

属性选择器

1：选中具有title属性的元素

[title]{ color: red; }

2:有title属性，且值为xxx

[title="atguigu1"]{ color: blue; }

3：有title属性，且值以a开头

[title^="a"]{ color: greenyellow; }

4：有title属性，且值以u结尾

[title$="u"]{ color: aqua; }

5：有title属性，值中含有u

[title*="u"]{ color: pink; }

伪类选择器

伪类：像类（class），实际是元素特殊状态的一种描述

动态伪类

/* 选中的是未访问的a */ a:link{ color: orange; } /* 选中的是访问过的的a */ a:visited{ color: red; } /* 选中的是鼠标悬浮时的颜色 */ a:hover{ color: blue; } /* 选中的是激活状态的a元素 */ a:active{ color:green; }

：link 超链接未被访问过的状态

:visited 超链接访问过的状态

:hover 鼠标悬停在元素上的状态

:active 元素激活的状态

:focus 获取焦点的元素

结构伪类

：first-child 所有兄弟元素中的第一个

: last-child 所有兄弟元素中的最后一个

: nth-child(n) 所有兄弟元素中的第n个

: first-of-type 所有同类型兄弟元素中的第一个

: last-of-type 所有同类型兄弟元素中的最后一个

: nth-of-type(n) 所有同类型兄弟元素中的第n个

: nth-last-child 所有兄弟元素中的倒数第n个

: nth-last-of-type 所有同类型兄弟元素中的倒数第n个

: only-child 选择没有兄弟的元素

: only-of-type 选择没有同类型兄弟的元素

否定伪类

:not(p) 选择所有p以外的元素

UI伪类

：checked 被选中的复选框或单选按钮

：enable 可用的表单元素

：disabled 不可用的表单元素

目标伪类

：target 选中锚点指向的元素

语言伪类

：lang（） 根据指定的语言选择元素

伪元素选择器

::before 在元素最开始的位置，创建一个子元素

::after 在元素最后的位置，创建一个子元素

::first-line 选中元素的第一行文字

::first-letter 选中元素的第一个文字

::selectipn 选中被鼠标选中的文字

::placeholder 选中输入框的提示文字