CSS(part 1)

最新推荐文章于 2024-06-18 16:11:06 发布

咕叽小丹

最新推荐文章于 2024-06-18 16:11:06 发布

阅读量374

点赞数

文章标签： css

本文链接：https://blog.csdn.net/m0_46577056/article/details/116068456

版权

CSS(part 1)

一、引入

1.什么是CSS

CSS 指层叠样式表 (Cascading Style Sheets)
通过CSS样式来定义如何显示 HTML 元素（字体、段落等等）
样式通常保存在外部的 .css 文件中

2.CSS语法

CSS 规则由两个主要的部分构成：① 选择器；② 一条或多条声明
为了代码查看，一般对样式进行注释，CSS注释以 /* 开始, 以 */ 结束,注释会被浏览器忽略，vscode注释快捷键 Ctrl + / ，也可以自定义快捷键（Html中使用<!–注释语句–>）

/* CSS声明总是以分号(;)结束，声明总以大括号({})括起来 */
/* 考虑到代码可读性，通常每行值描述一个属性 */
p {
    /*属性:值;*/
    color: green;
    text-align: center;
}

3.CSS的三种引入方式

外部样式表(External style sheet)
- 当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用<link> 标签链接到样式表。
内部样式表(Internal style sheet)
- 当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表
内联样式(Inline style)
- 在相关标签内使用样式style属性

多重样式优先级:内联样式 > 内部样式>外部样式> 浏览器默认样式

二、CSS选择器

css样式由两部分组成，形式如下：

选择器{  
  样式;  
}

在{}之前的部分就是“选择器”，“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。
CSS选择器有很多，具体可以参考CSS选择器手册，下面我们针对以下常用的选择器进行了解

1.标签选择器

标签选择器（又叫元素选择器）其实就是html代码中的标签。如<html>、<body>、<h1>-<h6>、<p>、<img>、<span>等。

语法：  
标签选择器 {
	css样式代码；
}

    <!-- 1.标签选择器（元素选择器） -->
    <h1>这是一个h1标题</h1>
    <p>这是一个段落</p>

/* 1.标签选择器（元素选择器） */
h1 {
    color:greenyellow;
}

p {
    font-size: 20px;
    font-weight: 500;
}

2.id选择器

以（#）号作为前缀，然后是一个自定义的ID名，应用ID选择器可以使用id属性来实现
一般通过ID选择器来定义HTML框架结构的布局效果，因为HTML的框架元素的值都是唯一的。

语法：  
#id选择器 {
	css样式代码；
}

    <!-- 2.id选择器 -->
    <div id="idDemo"></div>

/* 2.id选择器 */
#idDemo{
    width: 100px;
    height: 100px;
    background-color: hotpink;
}

3.类选择器

语法：
.类选择器名称 {
	css样式;
}

注意：
1)英文圆点开头
2)其中类选器名称可以任意起名（但不要起中文，最好可以语义化）

    <!-- 3.类选择器 -->
    <ul>
        <li class="puff">鲜奶泡芙</li>
        <li class="puff">酸奶泡芙</li>
        <li class="puff">草莓泡芙</li>
    </ul>

/* 3.类选择器 */
.puff {
    color: powderblue;
    font-size: 30px;
}

类选择器与ID选择器的比较

相同点：可以应用于任何元素
不同点：
（1）ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。
（2）可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用 ID 词列表）。

4.子选择器

即大于符号(>),用于选择指定标签元素的第一代子元素。

    <!-- 4.子选择器 -->
    <ul class="iceCream">
        <li id="milk">牛奶冰淇淋</li>
        <li>抹茶冰淇淋</li>
        <li>树莓冰淇淋</li>
    </ul>

/* 4.子选择器 */
.iceCream > #milk {
    text-decoration:line-through;
}

5.后代选择器

又叫包含选择器，即加入空格,用于选择指定标签元素下的后辈元素。

    <!-- 5.后代选择器 -->
    <div id="fish">
        <ul id="one">
            <li>海马</li>
            <li>海龙</li>
        </ul>
        <ul id="two">
            <li>清蒸鱼</li>
            <li>糖醋鱼</li>
        </ul>
    </div>

/* 5.后代选择器 */
#fish li{
    color: red;
}

子选择器与后代选择器比较

子选择器仅是指它的直接后代，可以理解为作用于子元素的第一代后代。通过>进行选择
后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择。
>作用于元素的第一代后代，空格作用于元素的所有后代。

6.通用选择器

通用选择器也叫通配符选择器，是功能最强大的选择器，它使用一个*号指定，它的作用是匹配html中所有标签元素

    <!-- 6.通配符选择器 -->
    <p>阿巴阿巴</p>
    <div>我是一个div</div>

/* 6.通配符选择器 */
* {
    font-size: 25px;
    color: royalblue;
}

7.伪类选择器

为什么叫做伪类选择器，它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个a标签元素的鼠标滑过的状态来设置字体颜色：

    <!-- 7.伪类选择器 -->
    <a href="http://www.bluemsun.work:8080/index.html">这是一个超链接</a>

/* 7.伪类选择器 */
/* 未访问的链接 */
a:link {
    color: #FF0000
}	
/* 已访问的链接 */	
a:visited {
    color: #00FF00
}
/* 鼠标移动到链接上 */	
a:hover {
    color: #FF00FF
}	
/* 选定的链接 */ 
a:active {
    color: #0000FF
}

8.分组选择器

又叫并集选择器，为html中多个标签元素设置同一个样式时，可以使用分组选择符,从而减少代码冗余

    <!-- 8.分组选择器 -->
    <p>阿巴阿巴</p>
    <div>我是一个div</div>

/* 8.分组选择器 */
p,div{
    color: sandybrown;
}
/* 等效代码 */
p {
    color: sandybrown;
}
div {
    color: sandybrown;
}

9.CSS层叠性

相同选择器给设置相同的样式，此时一个样式就会覆盖另一个冲突的样式。层叠性主要解决样式冲突的问题

规则：

样式冲突，遵循就近原则，哪个样式离结构近，就执行哪个样式。
样式不冲突，不会重叠。

10.CSS样式的继承

写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。
可继承的属性参考博客

11.选择器的优先级

如果一个元素使用了多个选择器,则会按照选择器的优先级来给定样式。
选择器的优先级依次是: !important>内联样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器
当网页制作者不设置css样式时，浏览器会按照自己的一套样式来显示网页(浏览器默认样式)。同时用户也可以在浏览器中设置自己习惯的样式，比如有字体大小，背景颜色等。这时注意样式优先级为：浏览器默认样式 < 网页制作者样式 < 用户自己设置的样式，但记住!important优先级样式是个例外，权值高于用户自己设置的样式。

在写网页代码时，有些特殊的情况需要为某些样式设置具有最高权值，这时候可以使用!important来解决。
p{color:red!important;}
注意：!important要写在分号的前面

12.CSS选择器权值计算

我们会遇见一个选择器或者各级选择器搭配嵌套使用的情况，如 div.bar或者 #nav .bar;如果有两条或两条以上指向同一元素的冲突 CSS 规则，则浏览器将遵循一些原则来确定哪一条是最具体的，并因此胜出。将特异性视为得分/等级，能够确定最终将哪些样式声明应用于元素。
如：通用选择器（*）具有较低的特异性，而 ID 选择器具有较高的特异性！
特异性规则参考
CSS中样式的权重计算采用的是进制形式：（内联样式），（id），（class），(元素)
关于权值的说法有不一，我们先定义以下的权值规则（这里我们参考CSS2中的一些例子）：

选择器	权重
*	0,0,0,0
标签选择器和伪元素选择器	0,0,0,1
类选择器	0,0,1,0
id选择器	0,1,0,0
内联样式	1,0,0,0
!important	∞

这里的0,1采用的进制并不是简单的十进制，也不是二进制
这里我们先简单的总结一下规则：

一条样式规则的整体权重值包含四个独立的部分：[A, B, C, D];
A 表示内联样式，只有 1 或者 0 两个值；
B 表示规则中 ID选择器的数量；
C 表示规则中类选择器数量；
D 表示规则中标签和伪元素选择器的数量；

样式显示规则

/* 样式一 */
body header div nav ul li div p a span em {color: red;}
/* 样式二 */
.count {color:yellow; }

页面显示为黄色

按照位比较
根据规范，计算权重值时，A, B, C, D 四组值，从左到右，分组比较，如果 A 相同，比较 B, 如果 B 相同，比较 C, 如果 C 相同，比较 D, 如果 D 相同，也就是权重相同时，后定义的优先。
样例代码中：样式二和样式一的 A、B 相同，而样式二的 C 大于样式一，所以，不管 D 的值如何，样式二权重值都大于样式一，因此实际结果显示为黄色。
由于进制的问题，（0,0,5,0）+(0,0,5,0) = (0,0,10,0) < (0,1,0,0)
不同浏览器采用不同大小的空间来存储每一位上的权重值：如firefox和ie都是用的8位来存储class位的权重值，也就是2^8=256。当叠加26层class时权重为10*26=260，就会发生溢出，向id位进一，权重为大于一个单一的id选择器。此时26层class的样式会在forefox上发挥作用，覆盖住id选择器的样式效果。

三、CSS常用属性

1.以文本样式为例

CSS 字体属性定义文本中与字体有关的样式

font-family

规定元素的字体系列，可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。
p{ font-family:"Times New Roman",Georgia,Serif; }

有两种类型的字体系列名称：
1 ) 指定的系列名称：具体字体的名称，比如：“times”、“courier”、“arial”
2 ) 通常字体系列名称：比如：“serif”、“sans-serif”、“cursive”、“fantasy”、“monospace”
ps:使用逗号分割每个值，并始终提供一个类族名称作为最后的选择

font-style

font-style 属性定义字体的风格
四种取值：normal（正常）| italic（斜体）| oblique（倾斜） | inherit（从父元素继承）

font-variant

font-variant 属性可以设定小型大写字母
取值： normal（正常）| small-caps（小体大写字母）
ps:小型大写字母不是一般的大写字母，也不是小写字母，这种字母采用不同大小的大写字母
<p>AAAAAaaa</p>
p { font-variant: small-caps; }

在这里插入图片描述

font-weight

font-weight 属性设置文本的粗细。
取值：normal（正常）| bold（加粗）。有些浏览器甚至支持采用100到900之间的数字（以百为单位）;数字 400 等价于 normal，而 700 等价于 bold。

font-size

可通过多种不同单位（比如像素或百分比等）来设置, 如：12xp，12pt，120%，1em

font 简写属性：在一个声明中设置所有字体属性。

.font{
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:12px;
line-height:1.5em;
font-family:arial,verdana;
}

/*简写*/
.font{
	font:italic small-caps bold 12px/1.5em arial,verdana;
}

font的简写注意事项
1、简写时，font-size和line-height只能通过斜杠/组成一个值，不能分开写。
2、顺序不能改变.这种简写方法只有在同时指定font-size和font-family属性时才起作用。而且，如果你没有设定font-weight, font-style, 以及 font-varient ，他们会使用缺省值

text-decoration

text-decoration 属性规定添加到文本的修饰。
取值：
text-decoration属性有4种值:

none 默认。定义标准的文本。如:p.none{text-decoration:none;}
underline 定义文本下的一条线。如:p.underline{text-decoration:underline;}
overline 定义文本上的一条线。如:p.overline{text-decoration:overline;}
line-through定义穿过文本下的一条线。如:p.line-through{text-decoration: line-through;}
blink 定义闪烁的文本。如:p.blink{text-decoration:blink;}
inherit规定应该从父元素继承 text-decoration 属性的值。如:p.inherit{text-decoration:inherit;}

text-shadow

text-shadow 属性给文本添加阴影效果。
语法：p{text-shadow: h-shadow v-shadow blur color;}

line-height

line-height 属性设置行间的距离（行高），不允许使用负值。
应用：单行文字或多行文字或图片垂直居中

text-transform

text-transform 属性控制文本的大小写

除上述样式以外，css还有很多的样式，如背景样式，链接样式、列表样式、表格样式、轮廓样式等等，具体参考CSS样式

四、盒子模型

1.HTML的元素分类

（1）块级元素

display:block
特点：
- 每个块级元素都独占一行，并且其后的元素也另起一行
- 元素的高度、宽度、行高以及顶和底边距都可设置
- 元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致）
常用块状元素：<div>、<p>、<h1> - <h6>、<ol>、<ul>、<dl>、<table>、<form>

（2）行内（内联）元素

display:inline
特点：
- 和其他元素在一行上
- 元素的高度、宽度及顶部和底部边距不可设置
- 元素的宽度就是它包含的文字或图片的宽度，不可改变
常见行内元素：<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

（3）行内块级元素

display:inline-block
特点：
- 同时具备内联元素、块状元素的特点
- 和其他元素都在一行上
- 元素的高度、宽度、行高以及顶和底边距都可设置
常见inline-block元素：<img>、<input>

2.盒子模型

在这里插入图片描述

（1）各元素解释

Content
- 实际的内容，可以是显示文本与图像等。
- css中设置的width与height即是content的宽高
Border
- 边框
- 元素的边框是围绕元素内容的内边框的一条或多条线，边框由粗细、样式与颜色三部分组成border: width style color；其中style属性有none、hidden（不显示边框，解决边框冲突问题）、dotted、double、solid等。
- 设置边框角的弧度：border-radius: 10px;
- 透明边框的应用
Padding
- 内边距
- 清除内容周围的区域，padding不可为负值
- padding只能设置大小，不能设置颜色（背景色为透明色），内边距受盒子的Background影响，可看到盒子背景色。
Margin
- 外边距
- 在元素外额外创建空白，margin可以取负值，可以设置大小，不能设置背景，即margin设置的空白区域可看到父元素的背景
- 与padding的区别：padding可看到的背景是自身元素的背景而非父元素

（2）关于margin和padding的取值问题（以margin为例）

margin：上右下左；（顺时针方向）
CSS 定义了一些规则，允许为外边距指定少于 4 个值。规则如下：
- 如果缺少左外边距的值，则使用右外边距的值
- 如果缺少下外边距的值，则使用上外边距的值
- 如果缺少右外边距的值，则使用上外边距的值

    /* 1个取值 */
    margin: 1px;
    margin: 1px 1px 1px 1px;
    /* 2个取值 */
    margin: 10px 30px;
    margin: 10px 30px 10px 30px;
    /* 3个取值 */
    margin: 10px 30px 20px;
    margin: 10px 30px 20px 30px;

如果不想自动补值，可以直接只设定一个外边框的值，则可使用单独设立：margin-top | margin-right | margin-bottom | margin-left

margin：0 auto;
- 盒子水平居中
- 可拆分： margin:0 auto 0 auto（上下）；还可拆分为：margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0;
- 浮动、绝对定位、固定定位的盒子失效

（3）margin的合并

块级元素的上外边距与下外边距有时会合并为单个外边距。合并的外边距的高度等于两个发生合并的外边距的高度中的较大者。

发生条件：
- 两个块级元素（block），内联元素不包括
- 是上下不包含左右
- 只发生在普通文档流中竖直方向上
几种情况
① 兄弟元素之间

负的margin：就从正相邻margin的最大值中减去负相邻margin的绝对值的最大值；如果没有正margin，就用0减去相邻margin的绝对值的最大值。

② 父子元素之间
当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上或下外边距也会发生合并
在这里插入图片描述
margin塌陷：垂直方向的margin不但会合并; 当父元素没有设置内边距或边框,以及触发BFC时,如果子元素的值大于父元素时，它会带着父元素一起偏移,此时子元素是相对除了它父级之外的离它最近的元素偏移的。
什么是BFC？参考文章

③ 一个空元素，没有边框和填充
假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并：
在这里插入图片描述
如果这个外边距遇到另一个元素的外边距，它还会发生合并：

这就是一系列的段落元素占用空间非常小的原因，因为它们的所有外边距都合并到一起，形成了一个小的外边距。

（4）margin失效

margin-top和margin-bottom对行内元素会失效，margin-left和margin-right是起作用的。
行内元素设置垂直方向padding的时候，文字本身的位置是不会发生变化的，但是占据空间会变大，所以一般不对行内元素设置padding-top，padding-bottom
display为table相关类型(不包括table-caption,table以及inline-table)的元素，也就是display:table-cell/display:table-row等声明的margin无效

（5）两种盒子模型

在这里插入图片描述

① W3C标准盒模型
元素总宽度 = 宽度 + 左内边距 + 右内边距 + 左边框 + 右边框 + 左外边距 + 右外边距
元素总高度 = 高度 + 上内边距 + 下内边距 + 上边框 + 下边框 + 上外边距 + 下外边距

② IE盒模型

IE6以下版本浏览器
content的width与height包括了border与padding
避免触发IE盒模型的方法是使用声明，告诉IE采用W3C盒子模型即可
注意区分：盒子所占空间和盒子实际的大小

③ 盒子模型相互转换

box-sizing属性
- content-box：（默认值）使元素遵循标准的W3C模型
- border-box：遵循IE盒子模型
  ○一个box宽度为100%，又想要两边有内边距
  ○让有边框的盒子正常使用百分比宽度
- inherit：规定从父元素继承box-sizing属性的值。

咕叽小丹

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
CSS(part 1)

CSS(part 1)一、引入1.什么是CSSCSS 指层叠样式表 (Cascading Style Sheets)通过CSS样式来定义如何显示 HTML 元素，（字体、段落等等）样式通常保存在外部的 .css 文件中2.CSS语法CSS 规则由两个主要的部分构成：① 选择器；② 一条或多条声明为了代码查看，一般对样式进行注释，CSS注释以 /* 开始, 以 */ 结束,注释会被浏览器忽略，vscode注释快捷键 Ctrl + / ，也可以自定义快捷键/* CSS声明总是以分
复制链接

扫一扫