【大数据平台开发】【Web前端】003CSS样式

小白的努力探索

已于 2023-04-19 14:45:26 修改

阅读量164

点赞数

分类专栏：【大数据平台开发】文章标签： css 前端 html

于 2023-03-31 16:55:13 首次发布

本文链接：https://blog.csdn.net/qq_44928822/article/details/129877800

版权

【大数据平台开发】专栏收录该内容

5 篇文章 0 订阅

订阅专栏

【大数据平台开发】【Web前端】003CSS样式

一. CSS概述

CSS（Cascading Style Sheets）层叠样式表
用途（好处）：内容与样式分离，便于样式修改。

1.1 CSS语法规则

CSS可以写在style标签中，而style标签一般被写在head标签里，放在title标签的后面，如

<style>
	p{
 		color: red;
 		front-size: 30px;
 		background-coler: green;
 		width: 60px;
 		}
</style>

选择器{属性名：属性值；}
CSS注释：/* */

二. CSS的添加方法

2.1 行内添加

直接在相应的标签中引入style属性，如

<p style = "color:red;">你好</p>

2.2 内嵌添加

在头部中引入style标签，如

<head>
	<style>
		p{color:red;}
	</style>
</head>

2.3 链接添加

在头部引入link标签，如

<head>
	<link rel="stylesheet" href="css/style.css">
</head>

其中，rel表示将要连接到什么类型的文件，href指向目标css文件。

2.4 引入方式间的关系

样式是可以相互覆盖的，一般采用的是就近原则。
不同的添加方式是有优先级的：行内>内嵌>链接>浏览器默认。

三. CSS选择器

CSS是搞美化，搞样式的不假，但是正所谓有的放矢，这个样式是给那个标签的还是需要指定一下的。这就引出了选择器：

3.1 标签选择器

标签名{CSS属性名：属性值；}
通过标签名，找到页面中所有这类标签，将样式设定成指定的样子。
注意点：标签选择器选中的是一类，而非某一个。

3.2 类选择器

.类名{CSS属性名：属性值;}
通过类名，找到页面中所有带这个类名的标签，设置样式。
注意点：所有标签都可以使用class属性，class属性的属性值是类名（与其说是类名，不如说是班级号）；一个标签里可以对应多个类名，不同类名用空格隔开，如：class=“类1 类2 类3”；一个类选择器可以同时选中多个标签。
举例

<style>
	.one{
		color:read;
		}
</style>

<p class="one">类选择器1</p>
<p class="one">类选择器2</p>

3.3 id选择器

#id属性值{CSS属性名：属性值；}
通过id属性值，找到页面中带有这一id属性值的标签，设置样式
注意点：所有标签都有id属性；id属性值类似身份证，唯一的指向某一个标签，即一个标签上只有一个id属性值，一个id选择器只能选中一个标签；id的诞生实际上是为了配合js，因此在CSS上应用就相对少了些。
举例

<style>
	#one{
		color:read;
		}
</style>

<p id="one">类选择器1</p>

3.4 通配符选择器

*{CSS属性名：属性值；}
作用：找到页面中所有的标签，设置样式。
注意点：开发中使用极少，只会在特殊情况下使用；可能被用于去除标签的默认格式，如：margin、padding。
举例：

<style>
	*{
		margin:0;
		padding:0;
		}
</style>
<!--清除默认的内外边距-->

以此分界上面的是基础选择器，下面的是复合选择器。

3.5 组合选择器

选择器1,选择器2{...}
找到选择器1+选择器2选中的标签，进行样式设置。
注意点：用,分割不同的选择器；每组选择器可以是基础选择器或复合选择器；每组选择器通常一行写一组，以提高代码的可读性。

3.6 后代选择器

选择器1 选择器2 {...}
在选择器1所指向的元素的后代中（子元素，孙子元素…）中，找到满足选择器2的标签，设置样式。
注意点：后代选择器中，选择器与选择器之间通过 空格 隔开。

3.7 子代选择器

选择器1 > 选择器2{...}
根据HTML标签的嵌套关系，选择父元素 子代中 满足条件的元素，即只找儿子，祸不及孙子。
注意点：子代选择器，只包括子元素；选择器与选择器之间通过>隔开。

3.8 交集选择器

选择器1选择器2{CSS}
对既能被选择器1选中，又能被选择器2选中的标签进行样式设置
注意点：交集选择器两个选择器间是紧挨着的，没有东西分隔；交集选择器中如果有标签选择器，标签选择器必须写在前面。

3.9 相邻兄弟选择器

选择器1+选择器2{...}
筛选出符合选择器2的元素，具体要求是选择器1与选择器2有共同的父元素，且选择器2是选择器1的下一个元素。

3.10 通用兄弟选择器

选择器1~选择器2{...}
筛选出符合选择器2的元素，具体要求是选择器1与选择器2有共同的父元素，且选择器2是选择器1后面的元素。

3.11 hover伪类选择器

选中鼠标悬停在元素上的状态，设置样式
选择器：hover{...}
注意点：伪类选择器选中的元素的某种状态，而不是具体那个标签。
详见5.2

四. CSS文本类型样式

单位、颜色、文本属性、文字属性

4.1 单位

px 像素
em 一个字符的像素量
% 百分比

4.2 颜色

关键词：预定义的颜色名 red green blue yellow
rgb表示法：红绿蓝三元色，每项取值范围： 0-255 rgb（0，0，0），也可以输入百分比，用相对计算法。
rgba表示法：红绿蓝三原色 + a表示透明度，取值范围是0-1 rgba（255，254，125，0.5）
十六进制表示法： #开头，将数字转化成十六进制表示 #000000 # ff0000 （每两位为一组表示rgb的某一种）

4.3 文本属性

color：文本颜色
letter-spacing：字符间距
line-height：行高。

可以用于做垂直居中，只需让段落的height与行高line-height一样即可；
设置line-height:1 可以取消上下间距，此处的1指的是1倍行间距。
行高包括：上间距、文本高度、下间距。

text-decoration：装饰线，none（可用于给超链接去掉下划线）、overline、underline、line-through
text-indent：首行缩进
text-align：水平对齐，center、left、right、justify（两端对齐）

注意点

如果需要让文本居中，text-align属性给文本所在标签（文本的父元素）设置
实际上不只是文本，图像等也可以用到text-align，切记要用到父元素上，img标签是图像本身，所以在img上搞text-align是没有意义的，一定要在父元素上下功夫，span、a、input、img标签都可以被安排，切记是对它们的父元素进行设定。

4.4 文字属性

font-family：字体设定，多种字体间用逗号隔开，每种字体用双引号约束。
font-size：字号大小
font-weight：字体粗细，normal：正常，bold：加粗；纯数字： 100-900的整百数，其中正常： 400，加粗： 700。
font-style：字体样式，正常：normal，倾斜： italic。
font：属性复合，取值：font： style weight size family；例：font ： italic 700 66px 宋体。

五. 背景与超链接

5.1 背景

background-color：背景颜色
background-image：背景图片，属性值：url（‘图片路径’）
background-repeat：背景平铺方式，repeat ：（默认值）水平和垂直方向都平铺；no-repead ：等尺寸覆盖，不平铺；repeat-x ：沿x轴平铺；repeat-y ：沿y轴平铺。
background-position：背景位置，属性值：水平方向位置竖直方向位置

方位名词（最多九个位置）：水平方向（left；center；right）竖直方向（top；center；bottom）
数字 + px （坐标）：坐标系（原点（0，0）是盒子的左上角；x轴水平向右；y轴垂直向下）操作（将图片左上角与坐标点重合）
注意点：方位名词取值和坐标取值可以混用，第一个取值代表水平，第二个取值代表竖直；如果坐标取负值，脱离盒子的部分不会被显示出来，即给正数会向右、向下移动；给负数会向上、向左移动。