CSS

N_Y_P

于 2021-04-13 21:35:30 发布

阅读量82

点赞数 2

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/N_Y_P/article/details/115454634

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS的基础知识，包括选择器的种类（简单选择器、组合选择器、伪类和伪元素选择器、属性选择器）、路径问题（外部CSS、内部CSS和行内CSS的使用）、背景属性、边框、内外边距、盒子模型、文本样式、字体、链接样式、定位、溢出处理、浮动和清除浮动、对齐方式、透明度控制以及导航栏的创建。内容涵盖了CSS的核心概念和实用技巧，是提升网页设计能力的重要参考资料。

摘要由CSDN通过智能技术生成

一、CSS是什么？

层叠样式表(英文全称：Cascading Style Sheets)

CSS 是一种描述 HTML 文档样式的语言。

CSS 能够对网页中元素位置的排版进行像素级精确控制，拥有对网页对象和模型样式编辑的能力。

二、选择器（十分重要）

1.简单选择器

标签选择器：

元素选择器根据元素名称来选择 HTML 元素。

id选择器：

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。

注意：id名称不能以数字开头

class选择器：

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。

class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点”.“号显示：

2.组合选择器

后代选择器（以空格分隔）：

后代选择器用于选取某元素的后代元素。

子代选择器（以大于号>分隔）：

与后代选择器相比，子代元素选择器只能选择作为某元素子元素的元素。

相邻兄弟选择器（以加号+分隔）：

相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素。“相邻”的意思是“紧随其后”。

通用兄弟选择器（以破折号~分隔）：

通用兄弟选择器选取所有指定元素同级的所有元素。

4.伪类选择器

锚伪类

a:link {color:red;}：未访问的链接
a:visited {color:green;}：已访问的链接
a:hover {color:black;}：鼠标划过链接
a:active{color:white;} ：已选中的链接

简单的工具提示悬停
CSS - :first-child 伪类
可以使用 :first-child 伪类来选择父元素的第一个子元素。

4.伪元素选择器

::first-line 伪元素：用于向文本的首行添加特殊样式。
注意：::first-line 伪元素只能应用于块级元素。
::first-letter 伪元素：用于向文本的首字母添加特殊样式。
注意：::first-letter 伪元素只适用于块级元素。
CSS - ::before 伪元素：可用于在元素内容之前插入一些内容。
CSS - ::after 伪元素：可用于在元素内容之后插入一些内容。
CSS - ::selection 伪元素：匹配用户选择的元素部分。

4.属性选择器

使用中括号[]来选择要选择的内容。

CSS [attribute] 选择器
选择器用于选取带有指定属性的元素。
CSS [attribute=“value”] 选择器
选择器用于选取带有指定属性和值的元素。
CSS [attribute~=“value”] 选择器
选择器选取属性值包含指定词的元素。
CSS [attribute|=“value”] 选择器
选择器用于选取指定属性以指定值开头的元素。
CSS [attribute^=“value”] 选择器
选择器用于选取指定属性以指定值开头的元素。
CSS [attribute$=“value”] 选择器
选择器用于选取指定属性以指定值结尾的元素。
CSS [attribute*=“value”] 选择器
选择器选取属性值包含指定词的元素。

三、路径问题

外部 CSS （推荐使用）

1.通过使用外部样式表，您只需修改一个文件即可改变整个网站的外观！

2.每张 HTML 页面必须在 head 部分的 <link> 元素内包含对外部样式表文件的引用。
例如：
```
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="CSS位置">
</head>
<body>

<h1>你好啊</h1>
<p>你好吗</p>

</body>
</html>
```
内部 CSS

1.如果一张 HTML 页面拥有唯一的样式，那么可以使用内部样式表。

2.内部样式是在 head 部分的 <style> 元素中进行定义。

例如:
```
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: red;
} 
p {
  color: black;
} 
</style>
</head>
<body>

<h1>你好啊</h1>
<p>你好吗</p>

</body>
</html>
```
行内 CSS（不推荐使用）

1.行内样式（也称内联样式）可用于为单个元素应用唯一的样式。

2.如需使用行内样式，请将 style 属性添加到相关元素。style 属性可包含任何 CSS 属性。
例如：
```
<!DOCTYPE html>
<html>
<body>

<h1 style="color:red;text-align:center;">你好啊</h1>
<p style="color:blue;">你好吗</p>

</body>
</html>
```

多重样式优先级
行内样式优先级最高，外部样式和内部样式谁离body更近，谁的优先级更高！

四、CSS背景（Background）

CSS 背景属性用于定义HTML元素的背景

background-color ：定义了元素的背景颜色。
background-image ：描述了元素的背景图像。
background-repeat：会在页面的水平或者垂直方向平铺。
repeat-x：图像仅在水平方向重复。
repeat-y：图像仅在垂直方向重复。
no-repeat：只显示一次背景图像。
background-attachment ：指定背景图像是应该滚动还是固定的（不会随页面的其余部分一起滚动）。
background-attachment: fixed：固定背景图像。
background-attachment: scroll：背景图像应随页面的其余部分一起滚动。
background-position：指定背景图像的位置。

CSS 背景简写：

	body {
	  background: #000000 url("图片") no-repeat right top;
	}

在使用简写属性时，属性值的顺序为：

background-color
background-image
background-repeat
background-attachment
background-position

五、边框（border）

边框样式：

样式如图所示
值得注意的是：在定义各个边框的样式的时候：
                 当设置四个属性的时候，顺序为：上，右，下，左
                 当设置三个属性的时候，顺序为：上，（左右），下
                 当设置二个属性的时候，顺序为：（上下），（左右）

边框宽度：border-width 属性为边框指定宽度。
边框颜色：border-color属性用于设置边框的颜色。
注意： border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式。
圆角边框：border-radius 属性用于向元素添加圆角边框。

六、内外边距

外边距：margin 属性用于在任何定义的边框之外，为元素周围创建空间。（和边框一样，从上开始顺时针）

margin：25px 20px 25px 20px

内边距：padding 属性用于在任何定义的边界内的元素内容周围生成空间。（同上）

padding：25px 20px 25px 20px

七、盒子模型（十分重要）

在这里插入图片描述

元素总宽度 = 宽度 + 左内边距 + 右内边距 + 左边框 + 右边框 + 左外边距 + 右外边距

元素总高度 = 高度 + 上内边距 +下内边距 + 上边框 + 下边框 + 上外边距 + 下外边距

1.CSS设置宽度和高度：

height 和 width 属性用于设置元素的高度和宽度。
height 和 width属性不包括内边距、边框或外边距。它设置的是元素内边距、边框以及外边距内的区域的高度或宽度。

重要:当您指定一个CSS元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完全大小的元素，你还必须添加填充，边框和边距。

2.CSS 高度和宽度值：

auto - 默认。浏览器计算高度和宽度。
% - 以包含块的百分比定义高度/宽度。

3.max-width,max-height：最大高度和最大宽度的作用：可以改善浏览器对小窗口的处理。为了使网站在小型设备上可用，这一点很重要。

八、文本

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

九、字体

字体样式（font-style）
字体系列（font-family）
字体大小（font-size）
字体粗细（font-weight）

十、链接

链接样式：

a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻

十一、Display/Visibility 属性

首先：要明白什么是块元素，什么是行内元素。

块元素是一个元素，占用了全部宽度，在前后都是换行符。例如：p标签，div标签。
内联元素只需要必要的宽度，不强制换行。例如：a标签，sapn标签。

display：display 属性规定元素应该生成的框的类型。
none：此元素不会被显示。
block：此元素将显示为块级元素。
inline：默认值。此元素会被显示为内联元素。
inline-block：行内块元素。（特点：1.可以改变宽高（块级元素特点），2.不独立成行（行内元素特点））
visibility：visibility 属性规定元素是否可见。
visible:默认值。元素是可见的。
hidden：元素是不可见的。

值得注意的是：