web学习---CSS学习---笔记(一)

原创已于 2024-12-10 10:41:15 修改 · 393 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html

于 2022-04-18 23:36:51 首次发布

Web 专栏收录该内容

14 篇文章

订阅专栏

本文深入浅出地介绍了CSS的基础选择器、复合选择器、样式属性设置，以及如何通过行内、内部和外部样式表组织代码。涵盖了标签选择器、类选择器、ID选择器、伪类选择器，以及背景设置、元素显示模式和导航栏样例实践。

CSS简介

CSS主要是美化网页、布局页面的
CSS是层叠样式（Cascading Style Sheets）的简称
CSS也是一种标记语言

CSS主要由两部分组成：选择器（选对人）以及一条或多条声明（做对事）
在这里插入图片描述

选择器是用于指定CSS样式的HTML标签，也就是你想对哪个标签做美化
选择器就是根据不同的需求把不同的标签选出来，这就是选择器的作用
花括号内是对该对象设置的具体样式
属性是对指定的对象设置的样式属性，比如：字体大小、文字颜色等
属性与属性值，以”键值对“的形式出现key: value
属性与属性值，中间用冒号:分开
一个属性结尾处，要以分号;结尾
一般写在head标签里面的style标签里

多个标签选择器中间，只需空格即可

书写规范建议：选择器与花括号之间有一个空格

CSS选择器

CSS选择器，可以分为：基础选择器和复合选择器

1. 基础选择器

基础选择器是由单个选择器组成的
基础选择器又包括：标签选择器、类选择器、id选择器和通配符选择器

1.1 标签选择器

标签选择器是指：用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式

<head>
		<meta charset="utf-8">
		<title>123</title>
		<style>
			p {
				color: red;
				font-size: 10px;
			}
			
			div {
				color: blue;
				font-size: 30px;
			}
		</style>
        <body>
            <h1>标题
            <p>分段</p>
            <div>div</div>
        </body>
</head>

在这里插入图片描述

1.2 类选择器

如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器
可以给标签写个类： class="类名"
然后，.类名即可找到这些类

<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.red {
				color: red;
			}
			.nv {
				color: purple;
			}
		</style>
	</head>
	<body>
		<p class="red">男</p>
		<p>男</p>
		<p>男</p>
		<div class="nv">女</div>
		<div class="nv">女</div>
		<div class="red">女</div>
	</body>

多类名

一个标签，可以有多个类名
<div class="red font">123</div>

在标签class属性中写多个类名
多个类名中间必须用空格分开

<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.red {
				background-color: red;
				width: 100px;
				height: 100px;
			}
			.font {
				font-size: 50px;
			}
		</style>
	</head>
	<body>
		<div class="red font">123</div>
	</body>

1.3 id选择器

id选择器可以为标有特定id的HTML元素指定特定的样式
HTML元素以id属性来设置id，CSS中id选择器以 ”#“ 来定义

id属性只能在每个HTML文档中出现一次

<style>
			#red {
				background-color: red;
			}
</style>


<div id="red">123</div>

问：class选择器与id选择器的区别？

class选择器，类似于找某类人
id选择器，类似于找某个人

1.4 通配符选择器

使用*，找到的是所有的标签

* {
	属性名：属性值;
}

CSS字体属性

font-family

font-family用来设置字体用哪种字体
可以用多个字体，首先查找第一个，有的话用第一个，没有的话查找下一个

<font-family: "宋体", "字体2", "字体3">

font-size=16px;：指定字体大小，注意要加上px
font-weight: bold;：指定字体是否加粗或者其他样式。也可以直接写数值
字体样式font-style：斜体font-style: italic;

font可以简写，有一定的顺序
font: 12px/24px含义是：字体大小12px，行高24px
如果
font: 12px/1.5含义是：字体大小12px，行高为字体大小的1.5倍

text的属性设置

text-align: center;可以设置文字居中
text-decoration: line-through;可以给文字添加上划线、下划线、划线
text-indent: 32px;第一行文字缩进大小
有个好用的单位em，其是一个字大小的宽度，也就是想缩进两个字，直接写2em即可
line-height: 100px;行与行之间的间距大小
在这里插入图片描述

CSS引入方式

按照CSS样式书写的位置（或引入的方式），CSS有三种引入方式：

行内样式表（行内式）
内部样式表（嵌入式）
外部样式表（链接式）

1. 行内样式表

在元素标签内部的style属性中设定CSS样式

<p style="font-size: 100px; color: red;">2015年，DCloud正式商用了自己 </p>

该写法，没有体现出结构与样式分离，所以不推荐大量使用

2. 内部样式表

内部样式表，就是写到html页面内部，将所有的CSS代码抽取出来，单独放到一个<style>标签中
<style>标签理论上可以放在HTML文档的任何地方，但一般都是放在<head>标签中
这种方式，可以控制整个页面中的元素样式设置

3. 外部样式表

实际开发中基本上都是用外部样式表
样式单独写到一个CSS文件中，再把CSS文件引入到HTML页面中使用

新建一个CSS文件
在HTML页面中，引入link标签
<link rel="stylesheet" href="css/style.css" />

Emmet语法

生成标签直接输入标签名按tab键即可
想生成10个同类标签，只需要 标签名*10 再按tab键即可
父子级使用> div>p：div为父，p为子
兄弟级用+ div+p
生成带类名或者id名字的，可以使用.demo 或者 #two 再按tab键

<div class="demo"></div>
<div id="two"></div>

.类名 #id名，默认是div标签，如果想在其他标签下，只需要前面加上标签名即可
标签名{内容} tab键可以生成标签内有文字的元素
$有递增的功能

2. 复合选择器

复合选择器是建立在基础选择器之上，对基础选择器进行组合形成的

复合选择器可以更准确、更高效的选择目标元素
符合选择器是由两个或多个基础选择器，通过不同的方式组合而成的
常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等

2.1 后代选择器

后代选择器又称为包含选择器，可以选择父元素里面子元素。
语法：元素1 元素2 { 样式声明 }

元素1 与元素2 一定要用空格隔开

2.2 子选择器

子选择器只能选择某一元素的最近一级子元素，也就是只能选亲儿子
语法：元素1 > 元素2 { 样式声明 }

举个栗子：

<style type="text/css">
	.first > a{
		color: red;
	}
</style>

<body>
		<ol class="first">
			<li>我是ol的孩子</li>
			<a href="">你好</a>
			<p>
				<a>你也好</a>
			</p>
		</ol>
		<ol>
			<li>我是ol的孩子</li>
			<a href="">你好</a>
			<p>
				<a>你也好</a>
			</p>
		</ol>
		<ul>
			<li>我是Ul的孩子</li>
		</ul>
	</body>

效果：
在这里插入图片描述

2.3 并集选择器

并集选择器可以选择多组标签，同时为他们定义相同的样式，通常用于集体声明
并集选择器，使用逗号链接
最后一个选择器，不需要加逗号

语法：元素1, 元素2 { 样式声明 }

2.4 伪类选择器

伪类选择器用于向某些选择器添加特殊效果，比如给链接添加特殊效果
伪类选择器书写最大的特点是，用冒号：表示，比如，:hover、:first-child

链接伪类选择器

必须按照link、viseted、hover、active的顺序访问
即：LVHA（LV hao）

		<style type="text/css">
			/* a:link 未访问过的链接 */
			a:link {
				color: black;
				text-decoration: none;
			}
			/* a:viseted 访问过的链接 */
			a:visited {
				color: orange;
			}
			/* a:hover 鼠标在链接上时 */
			a:hover {
				color: red;
			}
			
			/* a:active 鼠标点击下去，没有松开时的状态
			 类似于，heightLight
			 */
			a:active {
				color: green;
			}
		</style>

:focus伪类选择器

:focus伪类选择器用于选取获得焦点的表单元素
焦点就是光标，一般input类表单元素才能获取

input:focus{
	background-color: red;
}

CSS的元素显示模式

元素显示模式就是：元素（标签）以什么方式显示，比如<div>自己占一行，比如一行可以放多个<span>

HTML元素一般分为：块元素和行内元素两种

块元素(block)

常见的块元素有：

<h1>~<h6>，<p>，<div>，<ul>，<ol>，<li>等

其中，<div>标签是最经典的块元素
块级元素的特点：

比较霸道，自己独占一行
高度、宽度、外边距以及内边距都可以控制
宽度默认是容器（父级宽度）的100%
是一个容器及盒子，里面可以放行内或者块级元素

注意：
文字类的元素内不能使用块级元素

行内元素（内联元素）(inline)

常见的行内元素有：

<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等

其中，<span>标签是最典型的行内元素。

行内元素的特点：

相邻行内元素在一行上，一行可以显示多个
高、宽直接设置是无效的
默认宽度就是它本身内容的宽度
行内元素只能容纳文本或其他行内元素

注意：
链接里面不能再放链接

行内块元素 (inline-block)

包括：

<img/>、<input>、<td>

它们同时具有块元素和行内元素的特点

在这里插入图片描述

元素之间的转换

行内元素转换为块元素：
display:block;

块元素转换为行内元素：
display:inline;

转换为行内块元素：
display:inline-block

a{
	display: block;
}

测试联系

在这里插入图片描述
代码：

		<style>
			a{
				display: block;
				background-color: darkgray;
				width: 230px;
				height: 40px;
				font-size: 14px;
				text-indent: 2em;
				line-height: 40px;
			}
			a:link{
				color: white;
				text-decoration: none;
			}
			a:hover{
				background-color: orange;
			}
		</style>
	<body>
		<a href="#">手机 电话卡</a>
		<a href="#">电视 盒子</a>
		<a href="#">笔记本 平板</a>
		<a href="#">出行 穿戴</a>
	</body>

CSS的背景设置

background-image设置背景图片，默认是平铺的(repeat)
可以设置非平铺background-repeat: no-repeat;

背景图的位置，可以是方位名词，也可以是精确值
如果是方位名词：background-position:后面可以跟上方位词，表示位置
如果是精确值：background-position: xValue, yValue
如果后面只有一个精确值，那么，该值是x值，y默认居中对齐

div{
	width: 300px;
	height: 300px;
	background-image: url(./img/3.png);
	background-repeat: no-repeat;
	background-color: pink;
	background-position: center right;
}

background-attachment: fixed;
图片是固定fixed，还是可滚动scroll

上述属性可以简写为一个：
background: 背景颜色背景图片地址背景平铺背景图像滚动背景图片位置中间以空格分开
以上顺序不固定，可以任意顺序。但一般是按这个顺序

在这里插入图片描述

练习：五彩导航

在这里插入图片描述

<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- <link rel="stylesheet" href="css/style.css" /> -->
		<style type="text/css">
			.nav a{
				display: inline-block;
				width: 120px;
				height: 58px;
				text-align: center;
				line-height: 48px;
				color: white;
			}
			.nav a:link{
				text-decoration: none;
			}
			
			.nav #a{
				background: url(img/bg5.png) no-repeat left top;
			}
			.nav #a:hover{
				background-image: url(img/bg4.png);
			}
			
			.nav #b{
				background: url(img/bg2.png) no-repeat;
			}
			.nav #b:hover{
				background-image: url(img/bg22.png);
			}
			
			.nav #c{
				background: url(img/bg11.png) no-repeat;
			}
			.nav #c:hover{
				background-image: url(img/bg1.png);
			}
			
			.nav #d{
				background: url(img/bg4.png) no-repeat;
			}
			.nav #d:hover{
				background-image: url(img/bg3.png);
			}
		</style>
	</head>
	<body>
		<div class="nav">
			<a href="" id="a">五彩导航</a>
			<a href="" id="b">五彩导航</a>
			<a href="" id="c">五彩导航</a>
			<a href="" id="d">五彩导航</a>
		</div>
	</body>