CSS学习之选择器,样式表,背景,文本,字体

太过爱你忘了你带给我的痛 2022-02-28 15:20 301阅读 0赞

### CSS是什么? ###

CSS 指层叠样式表 (Cascading Style Sheets)  
样式定义如何显示 HTML 元素,样式通常存储在样式表中  
外部样式表可以极大提高工作效率,外部样式表通常存储在 CSS 文件中

### CSS语法 ###

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:  
![在这里插入图片描述][20190326095303683.jpg]  
选择器通常是您需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成。  
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

### CSS注释 ###

注释是用来解释你的代码，并且可以随意编辑它，添加注释是增加代码的可读性,浏览器会忽略它。

CSS注释以 "/*" 开始, 以 "*/" 结束, 实例如下:
    /*这是个注释*/
    p
    {
    text-align:center;
    /*这是另一个注释*/
    color:black;
    font-family:arial;
    }

### CSS的id和class选择器 ###

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。  
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “\#” 来定义。  
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。  
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>id和class</title> 
    <style>
    .center
    {
    	text-align:center;
    }
    #para1
    {
    	text-align:center;
    	color:red;
    } 
    </style>
    </head>
    <body>
    <h1 class="center">标题居中</h1>
    <p id="para1">Hello World!</p>
    </body>
    </html>

![在这里插入图片描述][20190326100806726.png]

### CSS标签选择器 ###

即以 html 标签作为 css 修饰所用的选择器。

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>CSS实例</title> 
    <style>
    p
    {color: red; text-align: center;} 
    </style>
    </head>
    <body>
    <p>Hello World!</p>
    <p>这个段落采用CSS样式化。</p>
    </body>
    </html>

![在这里插入图片描述][20190326100049280.png]

### 直接在标签内部加入CSS代码 ###

<h3 style="color:red;">CSS样式</h3>

#### CSS四种方式优先级 ####

直接在标签内部写代码 > id > class > 标签选择器

### CSS样式选择器补充 ###

#### 包含选择器 ####

包含选择器（package selector，PS）：指定目标选择器必须处在某个选择器对应的元素内部，语法格式：A B\{…\}（A、B为HTML元素/标签，表示对处于A中的B标签有效）。例：以下div内的p标签和div外的p标签分别匹配不同的样式

##### 包含选择器补充 #####

包含选择器除了有 A B\{…\} 的形式外（A和B都是标签），还可以有这种形式：.A B\{…\} 的形式（A是类名，B是标签）。  
作用与上面介绍的相同，会使 class 名为 A 的标签里面所有名为 B 的子代标签的内容按照设定的内容显示。

#### 子选择器 ####

子选择器（sub-selector，SS）：类似于PS，指定目标选择器必须处在某个选择器对应的元素内部，两者区别在于PS允许"子标签"甚至"孙子标签"及嵌套更深的标签匹配相应的样式，而SS强制指定目标选择器作为包含选择器对应的标签内部的标签，语法格式：A>B\{…\}（A、B为HTML元素/标签）。例：以下div内的p标签匹配样式，div内的table内的p不匹配

##### 子选择器补充 #####

子选择器除了有 A >B\{…\} 的形式外（A和B都是标签），还可以有这种形式：.A >B\{…\} 的形式（A是类名，B是标签）。  
作用与上面介绍的相同，会使 class 为 A 的标签里面所有名为 B 的直接子代标签的内容按照设定的内容显示。而非直接子代的 B 标签的内容是不会改变的。

#### 兄弟选择器 ####

兄弟选择器（brother selector，BS）：BS是CSS3.0新增的一个选择器，语法格式：A~B\{…\}（A、B为HTML元素/标签，表示A标签匹配selector的A，B标签匹配selector的B时，B标签匹配样式）

#### 通用选择器 ####

语法形式为：\*\{属性：属性值\}。它的作用是匹配 html 中的所有元素标签。

<style>
    *{color:red;}
    </style>
    <body>
    <h1>标题为红色</h1>
    <p>段落也为红色</p>
    </body

### CSS样式表 ###

插入样式表的方法有三种:  
外部样式表(External style sheet)  
内部样式表(Internal style sheet)  
内联样式(Inline style)

#### 外部样式表 ####

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

浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子：

hr {color:sienna;}
    p {margin-left:20px;}
    body {background-image:url("/images/back40.gif");}

#### 内部样式表 ####

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用style标签在文档头部定义内:

<head>
    <style>
    hr {color:sienna;}
    p {margin-left:20px;}
    body {background-image:url("images/back40.gif");}
    </style>
    </head>

#### 内联样式 ####

你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

### 多重样式 ###

样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。  
一般情况下，优先级如下：  
内联样式 > （内部样式）>（外部样式） > 浏览器默认样式

### CSS背景 ###

background					简写属性，作用是将背景属性设置在一个声明中。
    background-attachment		背景图像是否固定或者随着页面的其余部分滚动。
    background-color			设置元素的背景颜色。
    background-image			把图像设置为背景。
    background-position			设置背景图像的起始位置。
    background-repeat			设置背景图像是否及如何重复。

#### 背景颜色 ####

background-color 属性定义了元素的背景颜色.页面的背景颜色使用在body的选择器中:

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>CSS颜色</title> 
    <style>
    body
    {
    	background-color:#b0c4de;
    }
    </style>
    </head>
    <body>
    <h1>我的 CSS web 页!</h1>
    <p>你好世界</p>
    </body>
    </html>

CSS中，颜色值通常以以下方式定义:  
十六进制 - 如："\#ff0000"  
RGB - 如：“rgb(255,0,0)”  
颜色名称 - 如：“red”  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FhYWFhYWJf_size_16_color_FFFFFF_t_70]

#### 背景图像 ####

background-image 属性描述了元素的背景图像.默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.

![在这里插入图片描述][2019032911172641.png]

##### 背景图像–水平或垂直平铺 #####

只在水平方向平铺 (repeat-x)

![在这里插入图片描述][20190329114335167.png]

##### 背景图像–设置定位与不平铺 #####

可以使用 background-repeat 属性来让图像不平铺:  
可以利用 background-position 属性改变图像在背景中的位置:

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FhYWFhYWJf_size_16_color_FFFFFF_t_70 1]

##### 简写背景属性 #####

将上个实例进行代码简写:

##### 简写属性顺序 #####

当使用简写属性时，属性值的顺序为：:  
background-color  
background-image  
background-repeat  
background-attachment  
background-position  
以上属性无需全部使用，你可以按照页面的实际需要使用.

### CSS文本格式 ###

#### 文本颜色 ####

颜色属性被用来设置文字的颜色。颜色是通过CSS最经常的指定：  
十六进制值 - 如: ＃FF0000  
一个RGB值 - 如: RGB(255,0,0)  
颜色的名称 - 如: red

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>文本颜色</title> 
    <style>
    body {color:red;}
    h1 {color:#00ff00;}
    p.ex {color:rgb(0,0,255);}
    </style>
    </head>
    <body>
    <h1>这是标题 1</h1>
    <p>这是一个普通的段落。请注意,本文是红色的。页面中定义默认的文本颜色选择器。</p>
    <p class="ex">这是一个类为"ex"的段落。这个文本是蓝色的。</p>
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FhYWFhYWJf_size_16_color_FFFFFF_t_70 2]

#### 文本的对齐方式 ####

文本排列属性是用来设置文本的水平对齐方式。文本可居中或对齐到左或右,两端对齐.  
当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。  
left 把文本排列到左边。默认值：由浏览器决定。  
right 把文本排列到右边。  
center 把文本排列到中间。  
justify 实现两端对齐文本效果。  
inherit 规定应该从父元素继承 text-align 属性的值。

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>文本对齐方式</title> 
    <style>
    h1 {text-align:center;}
    p.date {text-align:right;}
    p.main {text-align:justify;}
    </style>
    </head>
    <body>
    <h1>CSS text-align 实例</h1>
    <p class="date">2015 年 3 月 14 号</p>
    <p class="main">“当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，
    决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，
    这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；
    在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。”</p>
    <p><b>注意：</b>justify实现两端对齐文本效果</p>
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FhYWFhYWJf_size_16_color_FFFFFF_t_70 3]

#### 文本修饰 ####

text-decoration 属性用来设置或删除文本的装饰。值为none的时候表示删除装饰.

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>文本修饰</title> 
    <style>
    h1 {text-decoration:overline;}
    h2 {text-decoration:line-through;}
    h3 {text-decoration:underline;}
    </style>
    </head>
    <body>
    <h1>This is heading 1</h1>
    <h2>This is heading 2</h2>
    <h3>This is heading 3</h3>
    </body>
    </html>

![在这里插入图片描述][20190329144023162.png]

#### 文本转换 ####

文本转换属性是用来指定在一个文本中的大写和小写字母。可用于所有字句变成大写或小写字母，或每个单词的首字母大写  
uppercase 大写  
lowercase 小写  
capitalize 首字母大写

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>文本转换</title> 
    <style>
    p.uppercase {text-transform:uppercase;}
    p.lowercase {text-transform:lowercase;}
    p.capitalize {text-transform:capitalize;}
    </style>
    </head>
    <body>
    <p class="uppercase">This is some text.</p>
    <p class="lowercase">This is some text.</p>
    <p class="capitalize">This is some text.</p>
    </body>
    </html>

![在这里插入图片描述][20190329144307582.png]

#### 文本缩进 ####

文本缩进属性是用来指定文本的第一行的缩进

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>文本缩进</title> 
    <style>
    p {text-indent:50px;}
    </style>
    </head>
    <body>
    <p>In my younger and more vulnerable years my father gave me some advice 
    	that I've been turning over in my mind ever since. 'Whenever you feel 
    	like criticizing anyone,' he told me, 'just remember that all the people 
    	in this world haven't had the advantages that you've had.'</p>
    </body>
    </html>

![在这里插入图片描述][20190329144453416.png]

### CSS文本属性: ###

color				设置文本颜色
    direction			设置文本方向。
    letter-spacing		设置字符间距
    line-height			设置行高
    text-align			对齐元素中的文本
    text-decoration		向文本添加修饰
    text-indent			缩进元素中文本的首行
    text-shadow			设置文本阴影
    text-transform		控制元素中的字母
    unicode-bidi		设置或返回文本是否被重写 
    vertical-align		设置元素的垂直对齐
    white-space			设置元素中空白的处理方式
    word-spacing		设置字间距

### CSS字体: ###

font-family 属性设置文本的字体系列,font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。注意: 如果字体系列的名称超过一个字，它必须用引号，如Font Family：“宋体”。多个字体系列是用一个逗号分隔指明：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>CSS字体</title>
    <style>
    p.serif{font-family:"Times New Roman",Times,serif;}
    p.sansserif{font-family:Arial,Helvetica,sans-serif;}
    </style>
    </head>
    <body>
    <h1>CSS font-family</h1>
    <p class="serif">这一段的字体是 Times New Roman </p>
    <p class="sansserif">这一段的字体是 Arial.</p>
    </body>
    </html>

![在这里插入图片描述][20190329145434505.png]

#### 字体样式: ####

主要是用于指定斜体文字的字体样式属性。  
这个属性有三个值：  
正常 - 正常显示文本  
斜体 - 以斜体字显示的文字  
倾斜的文字 - 文字向一边倾斜（和斜体非常类似，但不太支持）

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>字体样式</title>
    <style>
    p.normal {font-style:normal;}
    p.italic {font-style:italic;}
    p.oblique {font-style:oblique;}
    </style>
    </head>
    <body>
    <p class="normal">这是一个段落,正常。</p>
    <p class="italic">这是一个段落,斜体。</p>
    <p class="oblique">这是一个段落,斜体。</p>
    </body>
    </html>

![在这里插入图片描述][20190329145718650.png]

#### 字体大小 ####

font-size 属性设置文本的大小。能否管理文字的大小，在网页设计中是非常重要的。但是，你不能通过调整字体大小使段落看上去像标题，或者使标题看上去像段落。请务必使用正确的HTML标签，就h1 - h6表示标题和p表示段落：  
字体大小的值可以是绝对或相对的大小。  
绝对大小：  
设置一个指定大小的文本不允许用户在所有浏览器中改变文本大小确定了输出的物理尺寸时绝对大小很有用  
相对大小：  
相对于周围的元素来设置大小允许用户在浏览器中改变文字大小如果你不指定一个字体的大小，默认大小和普通文本段落一样，是16像素（16px=1em）。

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>字体大小</title>
    <style>
    h1 {font-size:40px;}
    h2 {font-size:30px;}
    p {font-size:20px;}
    </style>
    </head>
    <body>
    <h1>This is heading 1</h1>
    <h2>This is heading 2</h2>
    <p>This is a paragraph.</p>
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FhYWFhYWJf_size_16_color_FFFFFF_t_70 4]

#### 用em来设置字体大小 ####

1em和当前字体大小相等。在浏览器中默认的文字大小是16px。  
因此，1em的默认大小是16px。可以通过下面这个公式将像素转换为em：px/16=em

h1 {font-size:2.5em;} /* 40px/16=2.5em */
    h2 {font-size:1.875em;} /* 30px/16=1.875em */
    p {font-size:1.25em;} /* 14px/16=1.25em */

#### 使用百分比和em结合 ####

100%表示默认大小16px,可以调整为200%或50%,根据实际情况动态调整.

body {font-size:100%;}  
    h1 {font-size:2.5em;}
    h2 {font-size:1.875em;}
    p {font-size:0.875em;}

#### CSS字体属性 ####

font				在一个声明中设置所有的字体属性
    font-family			指定文本的字体系列
    font-size			指定文本的字体大小
    font-style			指定文本的字体样式
    font-variant		以小型大写字体或者正常字体显示文本。
    <style>
    p.normal {font-variant:normal;}
    p.small {font-variant:small-caps;}
    </style>
    font-weight			指定字体的粗细。
    <style>
    p.normal {font-weight:normal;}
    p.light {font-weight:lighter;}
    p.thick {font-weight:bold;}
    p.thicker {font-weight:900;}
    </style>

[20190326095303683.jpg]: /images/20220228/573a9b83eef8479eb6ff369523b5aaff.png
[20190326100806726.png]: /images/20220228/eb453d8c5a3c4eaf842dff25f3f4d94c.png
[20190326100049280.png]: /images/20220228/73738158bb2b4f169199a996def11f3d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FhYWFhYWJf_size_16_color_FFFFFF_t_70]: /images/20220228/87f73b6f6ed7479090c64125c1195336.png
[2019032911172641.png]: /images/20220228/c464e0a7aa3b4006ae036522500afeef.png
[20190329114335167.png]: /images/20220228/29afa224810049aeaf9c482cd14dcf28.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FhYWFhYWJf_size_16_color_FFFFFF_t_70 1]: /images/20220228/e13423bb7e9241048d12c38dc8a5884d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FhYWFhYWJf_size_16_color_FFFFFF_t_70 2]: /images/20220228/21660f281d314fa8858eca8c4db34f1a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FhYWFhYWJf_size_16_color_FFFFFF_t_70 3]: /images/20220228/1b497b3f42ca480e82475131578e5b4d.png
[20190329144023162.png]: /images/20220228/b52114df2024463aa2ff4c5765bae336.png
[20190329144307582.png]: /images/20220228/349c71a18b894f74a04ffedfe001b9fc.png
[20190329144453416.png]: /images/20220228/17ddaeb580a641f08eb96e2b4082b2b2.png
[20190329145434505.png]: /images/20220228/72a20d0ca6fb499aaf74c778d1e62468.png
[20190329145718650.png]: /images/20220228/dd744ad62bd748db8c785b4fcaf45750.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FhYWFhYWJf_size_16_color_FFFFFF_t_70 4]: /images/20220228/a6e248ece2db4183adc392c9979e302b.png