CSS概述

傷城~ 2022-05-25 01:40 284阅读 0赞

HTML是用来编写网页的骨架

CSS是用来美化网页

javaScript语言是用来为网页添加交互的效果

web的 衰落：

在web早期（1990-1993）,html是一个很局限的语言。几乎完全由用于描述段落，超链接，列表和标题的结构化元素组成。随着万维网的出现（用户交互体验的加强），对html的要求越来越大，人们迫切需要html增加新的元素，去完成一个特定的功能。

一片混乱：

迫于压力，html开始出现， ,<s> 等标签。但是html是一种描述结构的语言，也开始描述外在表现了。几年之后这种随便的做法暴露出严重的问题：1：由于html既写结构又写样式，导致页面缺乏结构性，降低了网页的可访问性。2：页面维护越来越困难

当html中存斥着的表现标记问题，W3c并没有忽视。在1995年，w3c开始发布一种正在进行的计划（work-in-prrgress） 称之为css。

与html相比，Css支持更丰富的文档外观，Css可以为任何元素的文本和背景设置颜色；允许在任何元素外围设置边框；允许改变文本的大小，装饰（如下划线），间隔，甚至可以确定是否显示文本。

什么是CSS？

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现[HTML][]（[标准通用标记语言][Link 1]的一个应用）或[XML][]（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 指层叠样式表 (Cascading Style Sheets)(级联样式表)

Css是用来美化html标签的，给页面添加好看的样式也就是外观

## CSS和HTML和JavaScript的关系 ##

HTML 结构层负责从语义的角度搭建页面结构CSS 样式层 负责从 审美的角度美化页JavaScript 行为层负责从交互的角度提升用户体验

##  CSS的基本语法 ##

选择器\{属性:值;属性:值;…….\}

<table> 
 <tbody> 
 <tr> 
 <td>属性</td> 
 <td>解释</td> 
 </tr> 
 <tr> 
 <td>Width:20px;</td> 
 <td>宽</td> 
 </tr> 
 <tr> 
 <td>Height:20px;</td> 
 <td>高</td> 
 </tr> 
 <tr> 
 <td>Background-color:red;</td> 
 <td>背景颜色</td> 
 </tr> 
 <tr> 
 <td>font-size:24px;</td> 
 <td>文字大小</td> 
 </tr> 
 <tr> 
 <td>text-align:left | center| right</td> 
 <td>内容的水平对齐方式</td> 
 </tr> 
 <tr> 
 <td>text-indent:2em;</td> 
 <td>首行缩进</td> 
 </tr> 
 <tr> 
 <td>Color:red;</td> 
 <td>文字颜色</td> 
 </tr> 
 </tbody> 
</table>

注意：属性和属性值之间用冒号(:)隔开，定义多个属性时，属性之间用英文输入法下的分号;隔开。

# 选择器 #

选择器：实现CSS对HTML页面样式的控制，如果要让这些样式对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器，HTML页面中的元素就是通过CSS选择器进行控制的。

## 基础选择器 ##

1. 标签选择器

2. 类选择器(重点)

3. ID选择器

4. 通配符选择器

### 标签选择器 ###

标签\{属性：值;\}

作用：标签选择器定义之后，会将页面所有的元素都执行这个标签样式。

<table> 
 <tbody> 
 <tr> 
 <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 通过标签选择器： &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;改变div标签内字体的颜色和大小 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;* */ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; div{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; font-size:50px; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; color: deeppink; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; background-color: yellow; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; width:200; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; height:100; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }</td> 
 </tr> 
 </tbody> 
</table>

颜色的显示方式：

1.     直接写颜色的名称

2.     十六进制显示颜色

3.     rgb(120,120,120);

4.     agba(120,120,120,x)了解

a)      x颜色的透明度 0-1

### 类选择器(重点) ###

写法 .类名\{

属性：值;

类名：自定义的

类选择器命名规范：

1.     不能用纯数字或者数字开头来定义类名

2.     不能使用特殊符号或者开头或者(\_)定义类名

3.     不建议使用汉字来定义类名

4.     不推荐使用属性或者属性值来定义类名

a)      header logo main hot

###  ID选择器 ###

语法：

\#自定义名称 \{

属性：值;

注意事项：在一个 HTML文档中，ID 选择器会使用一次，而且仅一次。

一个标签可以同时调用类选择和ID选择器

### 通配符选择器(了解) ###

\*\{属性：值\}

特点：给所有的标签都使用相同的样式。

不推荐使用，增加浏览器和服务器压力。

## 复合选择器 ##

概念：两个或者两个以上的基础选择器通过不同的方式连接在一起。

### 交集选择器 ###

语法： 标签+类（ID）选择器名称\{

属性:值;

特点：即要满足选择了标签还要满足选择类(ID)选择器。

### 后代选择器(重点) ###

语法：选择器+空格+选择器+选择器\{

属性:值;

后代：意思就是标签必须有父子关系，也就是嵌套关系。

后代的子元素：无限制各代的。

###  子代选择器 ###

语法 选择器>选择器\{

属性:值;

选中下一代元素

### 并集选择器 ###

语法： 选择器+选择器+选择器….\{

属性:值;

#  选择器练习 #

## 根据css样式写出对应的html结构 ##

div.div1ul.boxli,div.div1p\{

color: red;

<table> 
 <tbody> 
 <tr> 
 <td>&lt;style type="text/css" &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; /*案例练习*/ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; div.div1ul.boxli,div.div1p{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; color: red; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/style&gt; &nbsp;&nbsp; &lt;/head&gt; &nbsp;&nbsp; &lt;body&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="div1" &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;ul class="box" &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;练习题一&lt;/li&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/ul&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="div1"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;p&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 练习题一 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/p&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp; &lt;/body&gt;</td> 
 </tr> 
 </tbody> 
</table>

##    根据css样式写出对应的html结构 ##

div.boxp.p1,div.boxdiv.div1p,p\{

color: red;

<table> 
 <tbody> 
 <tr> 
 <td>&lt;head&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;meta charset="UTF-8"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;title&gt;&lt;/title&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;style type="text/css" &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; /*练习题二*/ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; div.divp.p1,div.boxdiv.div1p,p{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; color: red; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/style&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; &lt;/head&gt; &nbsp;&nbsp; &lt;body&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="div" &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;p class="p1" &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 练习题二 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/p&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="box"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="div1" &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;p&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 练习题二 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/p&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;p&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 练习题二 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/p&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/body&gt;</td> 
 </tr> 
 </tbody> 
</table>

# CSS字体 #

## CSS 字体属性 ##

#     CSS文本 #

## CSS 文本属性 ##

<table style="background:rgb(253,252,248);"> 
 <tbody> 
 <tr> 
 <td style="background:rgb(63,63,63);">属性</td> 
 <td style="background:rgb(63,63,63);">描述</td> 
 </tr> 
 <tr> 
 <td style="background:#FFFFFF;"><a href="http://www.w3school.com.cn/cssref/pr_text_color.asp" rel="nofollow">color</a></td> 
 <td style="background:#FFFFFF;">设置文本颜色</td> 
 </tr> 
 <tr> 
 <td><a href="http://www.w3school.com.cn/cssref/pr_text_direction.asp" title="CSS direction 属性" rel="nofollow">direction</a></td> 
 <td>设置文本方向。</td> 
 </tr> 
 <tr> 
 <td style="background:#FFFFFF;"><a href="http://www.w3school.com.cn/cssref/pr_dim_line-height.asp" rel="nofollow">line-height</a></td> 
 <td style="background:#FFFFFF;">设置行高。</td> 
 </tr> 
 <tr> 
 <td><a href="http://www.w3school.com.cn/cssref/pr_text_letter-spacing.asp" title="CSS letter-spacing 属性" rel="nofollow">letter-spacing</a></td> 
 <td>设置字符间距。</td> 
 </tr> 
 <tr> 
 <td style="background:#FFFFFF;"><a href="http://www.w3school.com.cn/cssref/pr_text_text-align.asp" title="CSS text-align 属性" rel="nofollow">text-align</a></td> 
 <td style="background:#FFFFFF;">对齐元素中的文本。</td> 
 </tr> 
 <tr> 
 <td><a href="http://www.w3school.com.cn/cssref/pr_text_text-decoration.asp" rel="nofollow">text-decoration</a></td> 
 <td>向文本添加修饰。</td> 
 </tr> 
 <tr> 
 <td style="background:#FFFFFF;"><a href="http://www.w3school.com.cn/cssref/pr_text_text-indent.asp" title="CSS text-indent 属性" rel="nofollow">text-indent</a></td> 
 <td style="background:#FFFFFF;">缩进元素中文本的首行。</td> 
 </tr> 
 <tr> 
 <td>text-shadow</td> 
 <td>设置文本阴影。CSS2 包含该属性，但是 CSS2.1 没有保留该属性。</td> 
 </tr> 
 <tr> 
 <td style="background:#FFFFFF;"><a href="http://www.w3school.com.cn/cssref/pr_text_text-transform.asp" rel="nofollow">text-transform</a></td> 
 <td style="background:#FFFFFF;">控制元素中的字母。</td> 
 </tr> 
 <tr> 
 <td>unicode-bidi</td> 
 <td>设置文本方向。</td> 
 </tr> 
 <tr> 
 <td style="background:#FFFFFF;"><a href="http://www.w3school.com.cn/cssref/pr_text_white-space.asp" title="CSS white-space 属性" rel="nofollow">white-space</a></td> 
 <td style="background:#FFFFFF;">设置元素中空白的处理方式。</td> 
 </tr> 
 <tr> 
 <td><a href="http://www.w3school.com.cn/cssref/pr_text_word-spacing.asp" title="CSS word-spacing 属性" rel="nofollow">word-spacing</a></td> 
 <td>设置字间距。</td> 
 </tr> 
 </tbody> 
</table>

#  CSS的创建 #

如何创建CSS样式表，有三种方式

第一种：外部样式表(主流)

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。<link> 标签在（文档的）头部：

第二种：内部样式表(极其少)

div\{

color: red;

</style>

第三种：内连样式（绝对不会使用的）

由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：

**css对链接操作**

<table> 
 <tbody> 
 <tr> 
 <td>&nbsp;&nbsp; &lt;head&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;meta charset="UTF-8"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;title&gt;&lt;/title&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;style type="text/css"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; /* &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; a:link {color:#FF0000;}&nbsp;&nbsp; 未被访问的链接 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; a:visited {color:#00FF00;} 已被访问的链接 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; a:hover {color:#FF00FF;}&nbsp; 鼠标指针移动到链接上 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; a:active {color:#0000FF;} 正在被点击的链接 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;*/ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; a:link{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; color:#C0C0C0; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; a:hover{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; color:#FF0000; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; a:active{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; color:#0000FF; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; a:visited{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; color:#FFFF00; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/style&gt; &nbsp;&nbsp; &lt;/head&gt; &nbsp;&nbsp; &lt;body&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;a href="交集选择器.html" &gt;去后代选择器.html 文件&lt;/a&gt; &nbsp;&nbsp; &lt;/body&gt;</td> 
 </tr> 
 </tbody> 
</table>

**CSS的背景属性**

## CSS 背景属性 ##

** CSS的列表属性**

[HTML]: https://baike.baidu.com/item/HTML
[Link 1]: https://baike.baidu.com/item/%E6%A0%87%E5%87%86%E9%80%9A%E7%94%A8%E6%A0%87%E8%AE%B0%E8%AF%AD%E8%A8%80
[XML]: https://baike.baidu.com/item/XML