前端-CSS与CSS3美化界面

最新推荐文章于 2024-03-05 10:17:34 发布

zhuixun1993

最新推荐文章于 2024-03-05 10:17:34 发布

阅读量446

点赞数 2

分类专栏：前端文章标签： html5 css

本文链接：https://blog.csdn.net/u013165358/article/details/118680801

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1. CSS的概念

CSS是美化HTML的工具。可以理解为：HTML定义了网页的内容，CSS负责美化。

CSS的优势：

功能强大
将内容展示与样式控制分离：
- 降低耦合度，解耦
- 让分工协作更容易
- 提高开发效率

2. CSS样式分类

包括：行内样式、内部样式、外部样式。

范围上：外部>内部>行内
优先级上：行内>内部>外部

优先级的体现：当多个样式作用在一个标签的时候，重复的样式按就近原则，不重复的则叠加显示。

2.1 行内样式

直接写在标签内的style属性里。缺点：耦合度高。仅对当前标签生效。此样式仅在测试的时候使用。

<div style="color: red;">hello my css</div>

2.2 内部样式

定义在head标签里，在style标签里写css代码。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>内部样式</title>
		<style>
			div{
				color: red;
			}
		</style>
	</head>
	<body>
		<div>hello my css</div>
	</body>
</html>

2.3 外部样式

将css代码以.css文件的形式保存。在要生效的html页面的head里面加入对此css文件的引用。

css文件内容：

	div {
		color: red;
	}

html的内容：

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="UTF-8">
			<title>外部样式</title>
			<link rel="stylesheet" href="css/lina.css" />
		</head>
		<body>
			<div>hello my css</div>
		</body>
	</html>

tips:在工具里直接打link就可以显示要引入的css文件了。

3. CSS语法

选择器{
	属性1: 值1;
	属性2: 值2;
	...
}

3.1 选择器分类

包含id选择器、class选择器、标签选择器。
范围：标签>class>id
优先级：id>class>标签

样式冲突时，以优先级高的为准。不冲突时，叠加显示。

3.1.1 id选择器

作用于所有相同id的标签。由于html的标签id的唯一性，因此此种选择器的结果类似于行内样式（用的少）。

定义的时候，以#开头。

#myDiv{
	color: red;
}

3.1.2 class选择器

class选择器能够作用于多个有相同class属性的标签。
定义的时候，以.开头。

.pinkColor{
	color: deeppink;
}

注意：类名第一个字符不能是数字，它无法在Mozilla和Firefox中生效。

3.1.3 标签选择器

作用范围：所有的这一种标签

p{ /*作用于段落 */
	color: "red";
}

3.2 复合选择器

由两个或多个基础选择器，通过不同方式组合而成的。

可以更准确更精细的选择目标元素标签。

3.2.1 全局选择器

语法：* {}一般去掉标签的一些默认效果的时候使用，或者整站通用效果时使用。但是不推荐，一般将 * 替换为常用标签的名称，并用逗号分隔，其实就是使用并集选择器。

a, address, b, big, blockquote, body, center, cite, code, dd, del, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, label, legend, li, ol, p, pre, small, span, strong, u, ul, var {
    margin: 0;
    padding: 0;
}

在这里插入图片描述

通常我们需要在css编写开始的时候，去除浏览器的样式。比如把margin设置为0，padding设置为0。
另外还要把超链接标签a设置text-decoration为none。

3.2.2 并集选择器

并集选择器（CSS选择器分组）是各个选择器通过,连接而成的，通常用于集体声明。

语法：选择器1，选择器2，......选择器N{}

意思是多个选择器都是通用的样式。任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。

在这里插入图片描述

3.2.3 交集选择器

条件：交集选择器由两个选择器构成，找到的标签必须满足：既有标签一的特点，也有标签二的特点。

语法：h3.class{ color:red; }

其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，例如div.list。

交集选择器是并且的意思。即…又…的意思

3.2.4 后代选择器

概念：后代选择器又称为包含选择器。

作用：用来选择元素或元素组的子孙后代。

其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔，先写父亲爷爷，在写儿子孙子。

.class h3{
	color:red;
	font-size:16px;
}

3.2.5 子元素选择器

作用：子元素选择器只能选择作为某元素子元素(亲儿子)的元素。

其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接。

语法：

.class>h3{
	color:red;
	font-size:14px;
}

3.2.6 伪类选择器

伪类选择器：和类选择器相区别类选择器是一个点比如 .demo {} 而我们的伪类用 2个点就是冒号比如 :link{} 。

作用：用于向某些选择器添加特殊的效果。比如给链接添加特殊效果，比如可以选择第1个，第n个元素。

因为伪类选择器很多，比如链接伪类，结构伪类等等。我们这里先给大家讲解链接伪类选择器。

a:link /* 未访问的链接 */
a:visited /* 已访问的链接 */
a:hover /* 鼠标移动到链接上 */
a:active /* 选定的链接 */

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>伪类选择器</title>
		<style>			
			/*伪类选择器*/			
			a:link{
				color: red;/*默认颜色是红色*/	
			}
			a:visited{
				color: blue;/*访问过的页面是蓝色*/	
			}
			a:hover{
				color: green;/*鼠标悬浮是绿色*/	
				font-size: 28px;
			}
			a:active{
				color: gold;/*按下鼠标不放手是金色*/	
				font-family: "微软雅黑";
			}
		</style>
		
	</head>
	<body>
		<a href="03-常用样式.html" target="_blank">常用样式</a>
		<a href="04-盒子模型1.html" target="_blank">盒子模型</a>
		<a href="05-综合练习.html" target="_blank">综合练习</a>
	</body>
</html>

注意

写的时候，他们的顺序尽量不要颠倒按照 lvha(四类的首字母) 的顺序。否则可能引起错误。
因为叫链接伪类，所以都是利用交集选择器 a:link a:hover
因为a链接浏览器具有默认样式，所以我们实际工作中都需要给链接单独指定样式。
实际开发中，我们很少写全四个状态，一般我们写法如下：

   a {   /* a是标签选择器  所有的链接 */
      font-weight: 700;
      font-size: 16px;
      color: gray;
   }
   a:hover {   /* :hover 是链接伪类选择器 鼠标经过 */
      color: red; /*  鼠标经过的时候，由原来的 灰色 变成了红色 */
   }

3.2.7 复合选择器比对

选择器	作用	特征	使用情况	隔开符号及用法
后代选择器	用来选择元素后代	是选择所有的子孙后代	较多	符号是空格 p .one
子代选择器	选择最近一级元素	只选亲儿子	较少	符号是> .nav>p
交集选择器	选择两个标签交集的部分	既是又是	较少	没有符号 p.one
并集选择器	选择某些相同样式的选择器	可以用于集体声明	较多	符号是逗号 .nav, .header
链接伪类选择器	给链接更改状态		较多	重点记住 a{} 和 a:hover 实际开发的写法

3.2.8 注意事项

注意优先级的问题。之前提到单一选择器的优先级：
id>类>标签
我们可以将id选择器优先级=100，类优先级=10，标签=1。这样就可以知道复合选择器的优先级：

.ul2 li的优先级为11；
li.a的优先级为2；
.ul2 .space的优先级为20；

应用：对应多个重名的css样式，以高优先级选择器定义的为准；优先级相同时就近原则。

4 CSS常用样式

4.1 color：字体颜色

取值方式：

颜色的单词：red、blue
rgb（红绿蓝）：rgb(255,0,0);
rgba（红、绿、蓝、透明度）：透明度0-1，全透明1，不透明0.
#值1值2值3：值的范式是00-FF 十六进制组成，例如：#FF0000。

4.2 width height：宽高

PS：只有块元素可以设置宽高，行级元素设置不生效。

取值方式有2种：

数值：绝对数字，单位是像素
百分比：占据父元素的比例

块状元素默认宽度为父元素宽度（100%），默认高度为里面所有元素叠加的高度。

4.3 背景样式

background-color：red【背景色】
background-image：url(img/submit.gif)【背景图片】
background-repeat：【平铺方式】
repeat-x 横轴平铺
repeat-y 纵轴平铺
repeat 都平铺
no-repeat 不平铺
background-position：30px 20px;【背景位置，第一个值表示横轴偏移量，第二个值表示纵轴偏移量】

.bg{
	background-color: beige;
	background-repeat: repeat;
	width: 80%;
}

4.4 文本样式

font-size：字号
font-family：字体
font-weight：字重，bold表示加粗。
text-decoration：文本划线位置
text-align：文本水平对齐方式
line-height：行高。如果想要文本垂直居中，单行文本可以设置行高=高度。多行可以使用盒子模型
letter-space：字之间的间距（像素单位）

.text{
	font-family: "微软雅黑";
	font-size: 30;
	font-weight: bold;
	text-align: center;
	text-decoration: line-through;
}

.text-vertical-align{
	height: 30px;
	line-height: 30px;
	background-color: burlywood;
}

4.5 列表样式

list-style-color：列表标记颜色
list-style-type：列表标记样式
list-style-image：用图片做标记
list-style-position：列表标记摆放位置。outside：至于文字外部 inside：和文字放一起。下面是outside的样式。

在这里插入图片描述

list-style：none 常用设置，无标记。

li{
	background-color: lavenderblush ;
	height: 50px;
	line-height: 50px;
	list-style-image: "img/a.png";
	list-style-position: outside;
	list-style-type: square;
}

4.6 边框样式

border-width：
border-color：
border-style：dashed、solid、dotted
border-top-***：设置顶边框
border-bottom-***：设置底边框（同理可设置左右边框）
border：solid 1px #ccc 常用的细边框样式

.border{
	border-color: #ccc;
	border-width:1px;
	border-style:solid;
}

5 盒子模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

盒子模型说明图：

在这里插入图片描述

5.1 盒子的宽度和高度

首先默认情况下，元素内设置的width和height是内容的宽度和高度。

此时，当我们计算一个元素实际在页面占有的总宽度计算公式是这样的：

总元素宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的：

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

5.2 设置box-sizing属性来确认我们设置的宽高属性是针对哪个部分的

在这里插入图片描述

content-box：设置的width和height是内容的宽高。
border-box：设置的width和height是最外围的宽高。

6 Display(显示) 与 Visibility（可见性）

6.1 两者的区别

display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。

隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

6.2 display 改变元素的类型

CSS样式有以下三个：

display:block – 显示为块级元素
display:inline – 显示为内联元素
display:inline-block – 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性

zhuixun1993

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端-CSS与CSS3美化界面

文章目录1. CSS的概念2. CSS样式分类2.1 行内样式2.2 内部样式2.3 外部样式3. CSS语法3.1 选择器分类3.1.1 id选择器3.1.2 class选择器3.1.3 标签选择器3.2 复合选择器3.2.1 全局选择器3.2.2 并集选择器3.2.3 交集选择器3.2.4 后代选择器3.2.5 子元素选择器3.2.6 伪类选择器3.2.7 复合选择器比对3.2.8 注意事项4 CSS常用样式4.1 color：字体颜色4.2 width height：宽高4.3 背景样式4.4 文本样
复制链接

扫一扫