id怎么添加背景颜色-统一样式设置-字体颜色为红色

目录

CSS知识总结

层叠样式表、CSS 性能

为什么要分离 CSS 和 HTML？

内容与表现分离，使页面布局更加灵活。减少网页代码，提高浏览器速度，节省网络带宽。独立的页面CSS有利于网页被搜索引擎收录。

CSS 导入方法内联样式

为标签类添加样式属性

例子：

嵌入模式

在 head 标签内添加 style 标签

例子：

    
            
        
            p {
                color: red;
            }
        
    

    
这是一个p标签！

外部样式表

1. 链接

使用链接标签连接 *.css 文件

例子：

2. 导入

使用@import url()

@import url() 必须写在文件的最开始。

例子：

@import url(other.css)

两者的区别：

1.link属于XHTML，@import属于CSS2.1（对不兼容CSS2.1的浏览器无效）

2.link连接的网页先加载css，@import引入的css文件先加载html再加载css

CSS 注释

/*这是注释*/

选择器简介

主要用于选择标签对象来设置样式或者脚本，比如第一个例子中，标签选择器选择了p标签，那么html中所有的p标签都会被选中。

统一样式设置-字体颜色为红色

基础选择器：标签选择器、类选择器、id选择器、通用选择器

高级选择器：联合选择器、交集选择器、后代选择器、子元素选择器、属性选择器

详细介绍

标签选择器

选择所有带有此标签的对象并直接写入标签名称

例子：

p {
    color: red;
}

类选择器

选取有同样class属性的标题，在class名前面加一个点。

例子：

.cl {
    color: red;
}

id 选择器

选择有id属性的标签，在id名称前添加#

例子：

#i1 {
    color: red;
}

通用选择器

设置所有标签格式，以 * 表示

*{
    color: red;
}

注意：

一个标签可以有多个类，一个类可以属于多个标签（多对多关系）。一个标签只能有一个id，一个id只能属于一个标签（一对一关系）。

后代选择器

该标签可以选出所有符合条件的标签，父标签与子标签之间以空格分隔。

例子：

div p{
    color:red;
}

说明：选择所有div标签，包括嵌套在子元素中的p标签

儿子选择者

只选择直接子元素，父标签与子标签之间用 > 分隔

例子：

div>p{
    color:red;
}

解释：只查找所有div下的p标签，不包括div下子元素中嵌套的p标签

联合选择器（组选择器）

只要满足其中一个条件，两个标签之间就用逗号分隔。

例子：

div,p{
    color:red;
}

交叉口选择器

必须同时满足多个条件

例子：

div#wrapper{
    color:red;
}

解释：选择器1和选择器2之间没有空格，两个选择器直接连接在一起，只有当标签为div标签，id名为wrapper时才有效。

相邻选择器

查找紧跟 div 之后的所有第一个 p 标签

例子：

div+p {
    color: red;
}

兄弟选择器

例子：

查找div标签后同级的所有p标签

div~p {
    color: red;
}

注意：基本选择器和高级选择器可以混合使用，如上例所示。

交集选择器可以是多个不同的id、classes、标签名……

属性选择器

按属性搜索

示例 1：

将包含该属性的标签的字体设置为红色

[title] {
    color: red;
}

示例 2：

将属性等于hello的标签的字体设置为红色

[title="hello"] {
    color: red;
}

类似地，也可以使用 ^=、$=、*=、~= 来表示以 hello 开头/结尾/包含/多个 title 属性之一是 hello 的字符串

例子：

input[type="text"] {
    backgroundcolor: red;
}

伪类选择器

1. 用于超链接

示例 1：

a:link{
    color:blue
}

当超链接未被访问时，它显示为蓝色。

类似地，您可以设置visited、hover和active来表示超链接被访问/鼠标悬停/点击时的样式。

2. 选择特征元素

first-child：选择第一个元素

last-child：选择最后一个元素

nth-child()：选择当前指定元素，索引从0开始

0 表示未选择，如果索引为 n，则表示选择所有子项；

当索引为 2n 时，表示选择所有偶数子项。

索引 2n-1 表示选择所有奇数子代

当索引为4n+1时，每三次就会替换一次。当索引为3n+1时，每两次就会替换一次。

伪元素选择器

示例 1：

p:first-letter {
    font-size: 48px;
}

选中p标签中第一个文本，设置字体大小为48px

示例 2：

p:before {
    content: "*";
    color: red;
}

在 p 标签前插入红色 *

示例 3：

p:after {
    content: "?";
    color: red;
}

在 p 标签后插入红色

注意：这个after用得比较多，主要是为了清除浮动

选择器优先级

权重优先顺序：id选择器 class选择器 标签选择器

选择器特点：继承、重叠

遗产

子类可以继承父类的一些属性

继承的属性：color.font-*.text-*.line-*

与一些布局框元素一样，定位元素（浮动、绝对定位、固定定位）不能被继承。

background-color属性不能被继承（因为默认子标签是透明的，所以当设置父标签时，子标签也是红色的）

可堆叠性

设置相同属性（相同权重）时，后设置的优先

注意：

1.继承的属性权重为0；所有继承的属性均基于靠近标签的选择器描述。

2.当一个标签有多个class，且属性有重叠时，以最后设置的为准。

!import 属性介绍

将权重设置为无限，但是子元素继承的权重仍然为0。（不推荐）

字体属性

这里简单介绍一下CSS字体样式的一些设置

font-family: 设置标签中的字体

例如：font-family:"Microsoft Yahei", "Microsoft Yahei", "Arial", sans-serif

解释：浏览器首先检查系统是否有微软雅黑字体，如果有则设置，如果没有则检查微软雅黑字体是否可用，按照这个顺序进行设置，直到系统有该字体为止。

注意：备选字体之间用逗号隔开，英文字体放在最前面，中文字体放在最后，因为英文字体可以识别中文和英文，中文字体只能识别中文。中文字体一般都有对应的英文字体吉祥物设计，比如微软雅黑就有微软雅黑。

如果系统没有其他字体，请设置 Songti

font-weight：设置标签字体的粗细

例如：font-weight: bold

注意：默认粗细为正常。您可以设置粗体、边框较粗、细体较细。或者您可以使用 100-900 之间的数字来设置粗细。

字体大小：设置字体大小

例如：font-size:15px

注意：默认字体大小为16px，设置字体大小的时候一定要带单位（如px、rem、rm）。1px代表1个像素，1rm代表一个字的宽度（具体多少个像素取决于父框的字体大小，如果父框是16px，那么1em就代表16px）

rem 只是相对于 html 或 body 的字体大小设置的（1rem 相当于一个 html 或 body 的字体大小）

颜色：设置字体颜色

例如：颜色：#666666

注意：字体颜色有三种表示方法

1.十六进制，例如#ffffff、#000000、#666666

2.RGB 或 RGBS，例如 RGB(0,0,0)、RGBS(255,255,0,0.5)

rbg的三个值分别代表红色（r-red）、蓝色（b-blue）、绿色（g-green），每个值的范围是[0,255]

3. 颜色名称，例如红色、蓝色、绿色

文本属性

设置一些常见的文本对齐方式

text-align：文本水平对齐方式

例如：text-align:center （通常用于设置文本的水平居中对齐）

注意：可以设置的属性有left/right/center/justify，分别代表水平左/水平右/水平居中/对齐。

text-decoration: 设置文本装饰

示例：text-decoration:none （常用于取消超链接文本默认下划线）

注：可以设置的属性有none/underline/overline/line-through/inherit，代表默认的文字样式/underline/overline/strikethrough（一般直接用strikethrough）/继承父元素的属性。

text-index：设置缩进，相当于首行缩进

例如：text-index:2em（首行缩进 2 的单词）

注意：一般不使用px，使用em

line-height：设置行高

示例：line-height:16px（常见行高=单行垂直对齐的字体大小设置）

注意：行高必须大于字体大小id怎么添加背景颜色，行高也可以用百分比表示，100% 表示行高 = 字体大小

全面的文本和字体设置

例如：font:14px/30px "宋体";

说明：字体大小/行高字体样式

常见的文本对齐方法

文本对齐：居中

line-height:100% 或 line-height:16px （具体内容高度）

使文本垂直和水平居中

背景属性

设置标签的背景

背景颜色：设置背景颜色

例如：background-color:red;

注意：不仅可以用十六进制来设置背景颜色，还可以直接输入单词ip形象，用rbg来表示。

rbga(255,255,0,0.5)：前三个数字与rgb中的三个数字含义相同，最后一个数字代表透明度

background-image：设置背景图片

例如：background-image:url(./bobo.jpg)

注意：url中的地址可以是网络地址，也可以是本地地址。

background-size：设置背景图片的属性

例如：background-size: 300px 300px

注：两个数值分别代表长度和宽度。

background-repeat：设置当图片尺寸小于框尺寸时是否重复图片

例如：background-repeat: no-repeat;

注意：您可以选择 repeat/no-repeat/repeat-x/repeat-y，分别代表平铺/不平铺/x 轴平铺/y 轴平铺。

background-attachment：设置背景是否随浏览器滚动

例如：background-attachment:fixed

注意：可以设置scroll/fixed/inherit，分别代表默认值，背景图片会随着页面其他部分的滚动而移动/图片不会随着页面的滚动而滚动/继承父类的属性

background-position：指定图像的位置

注：有三种方法：

第一种方法：设置水平方向和垂直方向。

例如：background-position:top left

可设置的值有top/bottom/left/right，分别代表top、bottom、left、right四种方式。

第二种方法：设置x%y%

例如：background-position:50% 50%

x和y的取值范围是[0,100]，当x为0时代表最左端，y为0时代表最右端。

第三种方法：使用字体大小方法xpos ypos

例如：background-position:60px 150px

设置水平和垂直方向，单位可以是px、em、rem，此方法和第二种方法可以配合使用。

注意：如果图片背景有白底，使用img会显示白底，换成div框+调整白框背景就OK了

未完成的部分：

1.css 精灵

盒子模型

在前端，css+div是很重要的模式

如图所示

盒子分为content、padding、border、margin；

注意：框的实际大小是内容 + 填充 + 边框。这意味着框背景将填充填充。

页边距不会被填充，但是页边距也是框的一部分，会显示为空白。

内容

主要是指内容的长宽。具体属性有height和width。

填充

主要是指边框到内容的距离，可以设置上、下、左、右四个方向

具体设置方法有四种

示例 1：padding：10px 15px 20px 30px

说明：设置上边距、右边距、下边距、左边距（逆时针）

示例 2：padding：10px 15px 20px

说明：设置上边距、左边距、下边距

示例 3：padding:10px 15px

说明：设置上边距、下边距、左边距、右边距

示例 4：padding:10px

说明：设置上、下、左、右边距

边框设置

设置边框粗细、线型和颜色

可以设置指定方向的边框样式，例如：border-top-width、border-left-style

当值为none或者0时，表示未设置样式。

border-width：设置边框宽度

例如：border-width:3px

border-radius：设置边框角度（设置之后边框变成圆角）

例如：border-radius:3px

border-style：设置边框样式

例如：border-style:solid

注：还可以设置dotted、dashed、solid，分别代表点状虚线边框、矩形虚线边框、实线边框。

类似地，你也可以设置边框颜色

总结：一般直接使用border:5px solid blue;整体设置即可。通过设置内边距来调整框内内容的位置。

利润

指标签与标签之间的距离

例如：margin:0 auto （通常用于使框水平居中）

注：外边框也可以设置四个方向，设置方法和padding相同。

0 表示侧面，auto 表示中心

保证金使用

margin: 0 自动使框水平居中

相当于

左边距：自动

右边距：自动

注意：当必须设置宽度时，只能设置 margin: 0 auto。此设置仅适用于标准流中的框。浮动框、固定定位和绝对定位无法使用。

*Margin垂直折叠问题

当上下框的垂直边距同时设置时，两个框之间的距离以较大的一个为准，这种现象称为塌陷。

例如：box1和box2是两个相邻的盒子，box1的margin-bottom为20px，box2的margin-top为50px，即两个标签之间的距离为50px，那么两个盒子之间的距离也是50px

注意：该问题出现在垂直方向，不会出现在水平方向。

* 在子框中设置 margin-top 会导致父框也向下移动，从而无法设置

原因：父亲无国界

解决方案：设置边框或使用父级的填充

通常使用padding代替margin来设置父框和子框之间的距离。

清除页面填充和边距（常用）

*{
    padding:0;
    margin:0;
}

显示属性

display属性可以设置元素的类型，可以设置为block/inline/inline-block/none，分别代表块级元素、内联元素、内联块元素、none。

功能：控制元素的显示与隐藏，以及块级元素与行内元素之间的转换

注意：设置为 none 时，元素将被隐藏。

display:none 和visibility:hidden 有什么区别？

display:none隐藏标签之后，不占用页面空间，而visibility:hidden隐藏标签之后，原有的标签空间显示为空白，占用了标签空间。

未完成部分

3. 倒三角示例

标准文件流程

网页制作是一个从上到下的流程

它们具有以下特点：

1. 坯料折叠现象

2.高度不均，底部对齐（当图片或文字大小不同时，底部保持对齐）

3.自动换行（字数过多时，多余的字会自动换行到下一行）

漂浮

通过设置浮动，标签可以并排显示，浮动元素可以与标签分开、靠拢、有字圈效果、紧凑效果，还可以设置宽高。

设置方法：在label样式中设置float

例如：float:left

注意：您可以选择左/右，分别表示左浮动/右浮动。

浮动特性

去除标签

浮动元素不符合标准流，如果上层盒子有浮动效果，下层没有浮动效果的盒子会被挤压上去id怎么添加背景颜色，和上层盒子重叠。

互相黏贴

当浏览器宽度足够时，浮动框会相互粘在一起；当宽度不够时，最外面的框就会掉下来。

（注意，它并不是直接改变显示的行，而是判断该层中是否有可以拖动该盒子的子盒子，如果可以拖动，就附加到这个盒子上。）

字符尺寸效应

当div浮动的时候，p并不浮动，div遮住了p（div的层级增加了），p里的文字不会被遮住，这样就形成了一个绕字效果。

收缩效应

浮动元素如果没有设置宽度，将自动缩小到文本的宽度（这与内联元素非常相似）

浮动元素顺序

浮动元素的顺序由 HTML 中标签的顺序决定。

总结：浮动在网页中运用比较频繁，通常情况下外层的盒子不需要浮动，内层的盒子通过浮动效果并排显示。

* 清除浮动

当上面的框浮动时，下面的框会被挤压。为了避免这种效果，请使用清除浮动

主要有两种方法

方法一：（最常用）

.clearfloat:after{
    content='.';
    display:block;
    height:0;
    clear:both;
    visibilility:hidden;
}

然后在需要清除浮动的标签类中添加clearfloat类

注意：content代表添加的盒子的内容，添加.可以防止盒子高度变成父元素高度。

方法 2

给父框的样式添加overflow:hidden；

注意：overflow有visible、hidden、scroll、auto、inherit几个选项，分别代表溢出部分显示、隐藏、滚动模式下显示、滚动模式下显示、继承父框的overflow属性。

定位

定位有三种类型：相对定位、绝对定位、固定定位。

默认是静态定位

相对定位

功能：微调元素的位置或确定定位的参考

特点：无标注，形影分离，老房子留坑，一般不用于遮盖效果

不偏离标准：不偏离标准流程

图像分离，在原处留下一个洞：原来的位置仍然被占用（空白显示），图像已被移动到其他地方

一般用途：通常用于嵌套框的子框定位，比如在滚动图片框中添加按钮，此按钮一般是相对定位的。

绝对定位

特点：去除标签、创建覆盖效果、完善层次结构、设置绝对定位、不区分行内元素和块级元素、可设置宽高

绝对定位参考点：以页面左上角为参考点，调整位置（top、left）

注意：使用bottom定位时，会以首屏右下角为参考点计算位置（bottom位置根据浏览器大小确定）

当浏览器滚动时，该元素也会滚动并保持固定在浏览器的左下角。

一般用途：通常用在嵌套框的父框上

绝对定位框居中

宽度：960px；

位置：绝对；

剩余：50%；

左边距：-480px；这里设置为宽度的一半

原理：left使框移动到50%，margin-left为负数，使框向左移动。只需将框移动到一半即可到达中间。

固定定位

修复当前元素不随页面滚动的问题

特点：1.无标签 2.升级版 3.固定不变，不会随页面滚动

一般用途：可以作为返回顶部栏、固定导航栏、小广告