CSS样式

最新推荐文章于 2024-03-27 20:51:24 发布
最新推荐文章于 2024-03-27 20:51:24 发布
阅读量1.2k 收藏
点赞数
文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46929862/article/details/118946596
版权

CSS简介

  • CSS的主要使用场景就是美化网页，布局页面的。
  • HTML的局限性
    HTML只关注内容的语义。HTML虽然可以做简单的样式，但是非常臃肿和繁琐。
  • CSS-网页的美容师
    CSS是层叠样式表（Cacading Style Sheets）的简称，有时也称为CSS样式表或级联样式表。
    CSS也是一种标记语言。
    CSS主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。
    CSS可以梅花HTML，让HTML更漂亮，让页面布局更简单。
  • 总结：
    1.HTML主要做结构，显示元素内容；
    2.CSS美化HTML，布局网页；
    3.CSS最大价值：由HTML专注去做结构呈现，样式交给CSS，即结构（HTML）与样式（CSS）相分离。
  • CSS语法规范
    CSS规则由两个主要的部分构成：选择器以及一条或多条声明
    1.选择器是用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式
    2.属性和属性值以键值对的形式出现
    3.属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
    4.属性和属性值之间用英文":"分开
  • CSS代码风格
    以下代码不是强制规范，而是符合实际开发书写方式。
    1.样式格式书写

①紧凑格式

h3 { color: deeppink;font-size: 20px;}

②展开格式

h3 { 
   color: deeppink;
   font-size: 20px;
}

推荐使用第二种，即展开格式，样式选择器、属性名关键字全部使用用小写字母，特殊情况除外。
属性值的前面，冒号后面，保留一个空格。
选择器（标签）和大括号中间保留一个空格。

CSS基础选择器

1.选择器的作用
根据不同的需求把不同的标签选出来，简单来说，就是选择标签用的（选对标签，改对样式）。

2.选择器类型

  • 标签选择器（元素选择器）：是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式；可以把某一类标签全部选出来，快速的为页面中同类型的标签设置统一的样式。但是不能差异化设置，只能选择全部的当前标签。
    语法规则：
标签名 {
    属性1: 属性值1;
    属性1: 属性值1;
    属性1: 属性值1;
    ...
}
  • 类选择器
    如果想要差异化的选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。
    语法：
.类名 {
   属性1: 属性值1;
   ...
}

需要在所选的标签里自定义类名，格式为 class=“类名”。

  • 注意：
    1）类选择器使用“.”（英文点号）进行标识，后面紧跟类名（自定义的类名）；
    2）可以理解为给这个标签起了一个名字来表示；
    3）长名称或者词组可以用中横线来为选择器名；
    4）不要使用纯数字、中文等命名，尽量使用英文字母来表示
    5）命名规范：见Web前端开发手册。
  • 使用类选择器画盒子
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.red {
				width: 100px;
				height: 100px;
				background-color: red;
			}
			.green {
				width: 100px;
				height: 100px;
				background-color: green;
			}
		</style>
	</head>
	<body>
		<div class="red">红色</div>
		<div class="green">绿色</div>
		<div class="red">红色</div>
	</body>
</html>

类选择器画盒子

  • 类选择器-多类名
    我们可以给一个标签指定多个类名，从而达到更多的选择目的，这些类名都可以选出这个标签，一个标签有多个名字。
  • 多类名的使用方式：
    1）在标签class属性中写多个类名
    2）多个类名之间必须用空格分开
    3）这个标签可以分别具有这些类名的样式
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		.red {
			color: red;
		}
		.font35 {
			font-size: 35px;
		}
	</style>
	<body>
		<div class="red font35">
			今天早睡
		</div>
	</body>
</html>

多类名使用方式

  • 多类名使用场景
    1）把一些标签元素相同的样式（共同的部分）放到一个类里面
    2）这些标签可以调用这个公共的类，然后再调用自己独有的类
    3)从而节省CSS代码，统一修改也非常方便
  • id选择器
    id选择器可以为标有特定id的HTML元素指定特定的样式
    HTML元素以id属性来设置id选择器，CSS中id选择器以“#”来定义
    语法：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#pink {
				color: pink;
				font-size: 20px;
			}
			#green {
				color: green;
				font-size: 40px;
			}
		</style>
	</head>
	
	<body>
		<div id="pink">
			明天早起
		</div>
		<div id="green">
			明天晚起
		</div>
	</body>
</html>

id选择器

注意：id属性只能在每个HTML文档中出现一次。
口诀：样式#定义，结构id调用，只能调用一次，别人切勿使用。
id选择器一般用于页面唯一的元素上，经常和JavaScript搭配使用。

3.通配符选择器
在CSS中，通配符选择器使用“*”定义，它表示选取页面中所有元素（标签）。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				color: aqua;
				font-size: 40px;
				background-color: #008000;
			}
		</style>
	</head>
	<body>
		<h3>通配符选择器</h3>
		<ul>
			<li>列表项1</li>
			<li>列表项2</li>
			<li>列表项3</li>
		</ul>
		<div >
			今天早睡
		</div>
	</body>
</html>

通配符选择器

CSS字体属性

CSS Font（字体）属性用于定义字体系列、大小、粗细和文字样式（如斜体）。

1.CSS使用font-family属性定义文本的字体系列。

h2 {
				font-family: "microsoft yahei";
			}
  • 各种字体间用英文状态下的都好隔开
  • 一般情况下，如果有空格隔开的多个单词组成的字体，加引号
  • 及你俩使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示
  • 各种字体优先显示第一个，第一个不能显示时显示第二个，以此类推，如果所设置的字体均无法显示，则显示浏览器的默认字体

2.CSS使用font-size属性定义字体的大小

			p {
				font-size: 20px;
			}
  • px（像素）大小是我们网页最常用的单位
  • 谷歌浏览器默认的文字大小是16px
  • 不同的浏览器可能默认显示的自豪大小不一致，我们尽量给一个明确值大小，不要默认大小
  • 可以给body指定整个页面文字的大小

3.CSS使用font-weight属性设置文本字体的粗细

			p {
				/* 使用bold加粗 */
				/* font-weight: bold; */
				/* 也可以使用数字的方式加粗字体，数字后面不要跟单位 */
				font-weight: 700;
			}
属性值描述
normal默认值（不加粗的）
bold定义粗体（加粗的）
100-900400等同于normal，而700等同于bold，注意数字后面不跟单位
  • 学会让加粗标签（比如h和strong等）不加粗，或者其他标签加粗
  • 实际来法师，我们更喜欢用数字表示粗细

4.CSS使用font-style属性设置文本的风格

	/* 让正常字体倾斜 */
			p {
				font-style: italic;
			}
			/* 让倾斜的字体不倾斜 */
			em {
				font-style: normal;
			}
属性值作用
normal默认值，浏览器会显示标准的字体样式
italic浏览器会显示斜体的字体样式

5.字体的复合属性

  • 常规写法
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 想要div文字变倾斜，加粗，字号设置为16像素，字体是微软雅黑 */
			div {
				font-style: italic;
				font-weight: 700;
				font-size: 16px;
				font-family: "microsoft yahei";
			}
		</style>
	</head>
	<body>
		<div>
			鹿晗擅长、足球、篮球、轮滑、跨栏、保龄球、台球、乒乓球、橄榄球等体育运动。
		</div>
	</body>
</html>
  • 简写
			div {
				/* 复合属性简写的方式 */
				/* 顺序不能改变 */
				/* font：font-style font-weight font-size/line-height font-family; */
				font: italic 700 16px "microsoft yahei";
			}

字体复合属性
1）使用font属性简写时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个 属性间以空格隔开
2）不需要的是属性值可以直接省略不写（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用

6.字体属性的总结：

属性表示注意点
font-size字号通常用的单位是px像素，一定要跟上单位
font-family字体实际工作中按照团队约定来写字体
font-weight字体粗细加粗是700或者bold，不加粗是normal或者400，数字不能跟单位
font-style字体样式倾斜是italic，不倾斜是normal，工作中最常用normal
font字体连写（艰辛简写）字体连写是有顺序的，不能随意更换位置；其中字号和字体必须同时出现

CSS文本属性

CSS Text（文本）属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。

1.文本颜色：color属性用于定义文本的颜色

			div {
				color: red;
			}

颜色表示方式：

颜色表示属性值
预定义的颜色值red，green，pink，blue等
十六进制#FF0000，#FF6600，#29D794等
RGB代码rgb(255,0,0)或rgb(100%,0%,0&)（r-红色，g-绿色，b-蓝色，后面对应的数字，表示三原色分别占的比例，可调出不同颜色）

开发中最常用的是十六进制

2.对齐文本：text-align属性用于设置元素内文本的水平对齐方式

			div {
				text-align: center;
			}
属性值解释
left左对齐（默认值）
right右对齐
center居中对齐

3.装饰文本：text-decoration属性规定添加到文本的修饰，可以给文本添加下划线、删除线、上划线等。

			div {
				text-decoration: underline ;
			}
属性值描述
none默认，没有装饰线，可以取消原本存在的下划线（最常用）
underline下划线，链接标签a自带下划线（常用）
overline上划线（几乎不用）
line-through删除线（不常用）

4.文本缩进：text-indent属性用来指定文本第一行的缩进，通常是将段落的首行缩进。

			p {
				/* 文本第一行缩进多少距离，可以是负数 */
				/* text-indent: 20px; */
				/* 入关单位是nem（n是正整数），则是缩进当前元素两个字大小的距离 */
				text-indent: 2em;
			}

em是一个相对单位，就是当前元素（font-size）一个文字的大小，如果当前元素没有设置大小，则会按照父元素的一个文字大小。

5.行间距：line-heigth属性用于设置行间的距离（行高），可控制文本行与行之间的距离。
行间距

			p {
				line-height: 30px;
			}

6.文本属性总结：

属性含义注意点
color文本颜色我们通常用十六进制表示
text-align文本水平对齐可以设定文字水平对齐的方式（left、right、center）
text-indent文本缩进可以设置文本第一行缩进的距离
text-decoration文本修饰添加下划线（underline），取消下划线（none）
line-height行高控制行与行之间的距离

CSS的引入方式

CSS的三种样式表

1.内部样式表（内嵌样式表）：写到HTML页面内部，是将所有的CSS代码抽取出来，单独放到一个<style>标签中，<style>标签一般放到HTML页面中的<head>标签中，可以控制整个页面。

		<style type="text/css">
			div {
				text-decoration: underline ;
			}
			p {
				line-height: 30px;
			}
		</style>

2.行内样式表（内联样式表）：在元素标签内部的style属性中设定CSS样式。适合于修改简单央视。

		<div style="color: #008000; font-size: 30px;">
			鹿晗擅长、足球、篮球、轮滑、跨栏、保龄球、台球、乒乓球、橄榄球等体育运动。
		</div>
  • style属性其实就是标签的属性
  • 在双引号中间，写法要符合CSS规范
  • 只能控制当前标签的样式
  • 由于书写繁琐，而且没有体现出结构与样式相分离的思想，所以不推荐大量使用。
  • 使用行内样式表设定CSS，通常也被称为行内式引入。

3.外部样式表：实际开发中使用比比较多的情况。核心：样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用。

  • 引入外部样式表分为两步：
    1）新建一个后缀名为.css的文件，把所有的CSS代码都放入到此文件中。
    2）在HTML页面中，使用<link>标签引入这个文件。
<link rel="stylesheet" type="text/css" href="css文件路径"/>

HTML内容：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/外部样式表.css"/>
	</head>
	<body>
		<div>
			鹿晗擅长、足球、篮球、轮滑、跨栏、保龄球、台球、乒乓球、橄榄球等体育运动。
		</div>
		<p>鹿晗出生于北京市海淀区，是一个地道的北京孩子。先后就读于北京市育英学校（1996级）、北京市师达中学（2002级）以及北京海淀外国语实验学校（2005级） [10]  。2008年，鹿晗赴韩国留学，在延世大学韩国语学堂学习韩语，并通过了韩语等级考试。2009年，考入首尔的一所艺术院校继续深造，在实用音乐艺术系学习。留学期间，在明洞逛街时被韩国SM娱乐有限公司的星探发掘 [11]  。2010年，通过S.M. Casting System成为旗下练习生 [12]  。</p>
	</body>
</html>

CSS文件内容：

/* 这里的CSS文件只有样式 */
div {
	text-decoration: underline ;
}
p {
	color: #008000;
}

结果展示：
外部样式表

属性作用
rel定义当前文档与被链接文档之间的关系，在这里需要指定为”stylesheet“，表示被链接的文档是一个样式表文件
href定义所链接外部样式表文件的URL（地址），可以是相对路径，也可以是绝对路径。
  • 使用外部样式表设定CSS，通常也被称为外链式或连接式引入，这种方式是开发中常用的方式。

3.CSS要引入方式总结：

样式表优点缺点使用情况控制范围
行内样式表书写方便，权重高结构样式混写较少控制一个标签
内部样式表部分结构和样式分离没有彻底分离较多控制一个页面
外部样式表完全实现结构和样式分离需要引入最多控制多个页面

综合案例-新闻页面

HTML页面内容：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/河南暴雨.css"/>
	</head>
	<body >
		<div >
			<h1>六问河南特大暴雨：这里为何成为全国强降雨中心？</h1>
			<div class="t2">
				2021-07-20 19:04:12 来源： <a href="http://www.weather.com.cn/">中国天气网</a>
				<input type="search" name="search" value="请输入查询条件 " class="t2" /><button type="button">搜索</button>
			</div>
			<hr >
			<p>中国天气网讯 大暴雨，特大暴雨，今年最大降雨，数十年来最强降雨……这两天，河南暴雨刷屏，多个站点打破7月单日降水纪录，郑州更是一小时降下超常年一个月的雨量。受暴雨影响，河南多地出现内涝、洪水，街边车辆被卷走，灾情牵动全国人民的视线。为何河南雨势如此猛烈？强降雨何时可以结束？快来听听气象专家的权威解析。</p>
			<div class=t1>
				<img src="http://i.weather.com.cn/images/cn/news/2021/07/20/1626778611124076743.jpg" ><br>
				月20日，郑州遭遇罕见强降雨，造成城区内部分路段积水。（李超庆/中新社/视觉中国/版权图片）
			</div>
			<div class="t0">
				<strong>一、河南雨到底有多大？</strong>
			</div>
			<p>7月17日夜间以来，河南省普降暴雨、大暴雨，局部特大暴雨。强降水主要集中在西部、北部和中部地区，郑州、焦作、新乡、洛阳、南阳、平顶山、济源、安阳、鹤壁、许昌地区出现特大暴雨。</p>
			<div class=t1>
				<img src="http://i.weather.com.cn/images/cn/news/2021/07/20/1626778672276058970.jpg" ><br>
				郑州市航海东路中原福塔门前，前往绕城高速的道路因积水中断。（袁晓强/人民视觉/版权图片 来源视觉中国）
			</div>
			<p>监测显示，19日17时-20日17时，全省大部出现暴雨大暴雨，郑州、许昌、新乡等地区出现特大暴雨。全省平均降雨量73.1毫米,郑州、许昌、新乡平均降水量分别为：286.5毫米、141.5毫米、129.6毫米。有2587个雨量站降水量超过50毫米，大于100毫米的有1198个，大于250毫米的有311个。最大降水量出现在郑州市尖岗584.0毫米。</p>
			<p>中国天气网气象分析师张娟表示，昨天8时至今天8时，像是嵩山364.6毫米，新密254.9毫米，都是当地首次出现特大暴雨，多个站点打破7月单日降水纪录。像是嵩山，这里的降雨累计雨量大、持久性强且雨强大，从18日到20日16时，嵩山和新密累计雨量已经达到557毫米及512.7毫米，郑州昨天出现166毫米大暴雨，为入汛来最强单日降雨，而今日郑州强降雨仍在继续，16-17时单小时降雨201.9毫米。郑州、嵩山都已出现明显内涝和积水。</p>
			<div class=t1>
				<img src="http://i.weather.com.cn/images/cn/news/2021/07/20/1626773346128087997.jpg" ><br>
				嵩山气象站气象人员正在检修仪器。
			</div>
			<div class="t0">
				<strong>二、造成河南强降雨的原因是什么？</strong>
			</div>
			<p>河南省气象台首席预报员张宁表示，西太平洋副热带高压和大陆高压分别稳定维持在日本海和我国西北地区，阻挡了上游系统移动，导致西风带低值系统在华北、黄淮地区长时间维持。受深厚的东风急流及稳定的低涡切变影响，配合河南省太行山区、伏牛山区特殊地形对偏东气流的强辐合抬升效应，使得强降水中心主要分布在河南省西部、西北部沿山地区稳定少动，造成了河南省长时间降水。</p>
			<p>由于降水持续时间比较长，且强降水发生的区域比较集中，造成西部、西北部山区山洪、地质灾害风险明显增高，黄河流域、海河流域中小河流、水库水位迅速上涨，另外还造成了大范围城市内涝、农田积涝。</p>
			<div class="t0">
				<strong>三、此次降水过程有什么样的特点？</strong>
			</div>
			<p>一是持续时间长。7月17日开始河南省，河南省西部、中西部地区连续四天出现大范围强降水天气，并且强降水仍将持续。</p>
			<p>二是累积雨量大。全省平均降雨量113.5毫米,郑州、焦作、新乡平均降水量分别为：357毫米、210.6毫米、194.5毫米。最大降水量出现在荥阳市环翠峪728.0毫米。</p>
			<p>三是强降水范围广。全省共有4098个雨量站降水量超过50毫米，大于100毫米的有1923个，大于250毫米的有606个。</p>
			<p>四是强降水时段集中。强降水时段主要从18日夜间开始，北部、中部、西部地区普降暴雨、大暴雨，局地特大暴雨。</p>
			<p>五是具有极端性。嵩山、偃师、新密、伊川、登封等5个站点突破建站以来日降水量历史极值。嵩山、巩义、新密、偃师、登封等5个站点突破建站以来 3 日累计降水量历史极值。</p>
			<div class="t0">
				<strong>四、历年还有更猛的暴雨过程吗？</strong>
			</div>
			<p>中国天气网气象分析师张娟介绍，1975年“75·8”暴雨最为猛烈。1975年8月5日至8日，受7503号台风影响，河南暴雨中心泌阳县林庄6小时雨量830.1毫米，24小时雨量达到1060.3毫米，3天雨量1605.3毫米。</p>
			<div class="t0">
				<strong>五、强降雨何时结束？</strong>
			</div>
			<p>今天前半夜，雨势会稍有减弱，从后半夜开始雨势将再次有所增强，但总体的雨势没有昨晚到今天上午的强，因为整个降雨的趋势是逐渐走弱的。</p>
			<p>预计此次强降水将持续到明天夜里，强降水集中区域仍是在豫西北和豫中一带，降水量能够达到100到250毫米，局部300到400毫米。22日至26日，河南省无明显大范围强降水天气，全省多分散性的雷雨天气。</p>
			<p>河南省气象台预计，预计今天夜里，全省阴天有小到中阵雨、雷阵雨，其中黄河以北和洛阳、郑州、开封、平顶山、许昌、漯河六地区及商丘、周口两地区西部与三门峡、南阳两地区北部部分地区有大到暴雨，局部大暴雨或特大暴雨并伴有短时强降水、短时大风等强对流天气。</p>
			<p>明天白天，全省阴天有小到中阵雨、雷阵雨，其中黄河以北和洛阳、郑州、开封、平顶山、许昌五地区及南阳地区北部部分地区有大到暴雨，局部大暴雨并伴有短时强降水、短时大风等强对流天气。</p>
			<p>明天夜里，全省阴天有阵雨、雷阵雨，其中北部和中西部部分地区有中到大雨，局部暴雨或大暴雨并伴有短时强降水等强对流天气。</p>
			<p>张娟提醒，今明两天，河南的强降雨区将会和之前高度重合，山洪、地质灾害风险都将进一步加剧，相关部门以及公众要特别关注强降雨可能引发的次生灾害、城市内涝等情况。</p>
			<div class="t0">
				<strong>六、河南气象部门采取了哪些措施？</strong>
			</div>
			<p>针对此次过程，河南省气象局认真贯彻全省防汛工作会议精神，按照1号指挥长令要求，各级气象部门迅速行动、周密部署、实行战时工作机制，落实24小时防汛值班制度和领导带班制度。</p>
			<p>一是加强精密监测，气象卫星、新一代多普勒天气雷达24小时连续观测，全省对地面、探空加密监测时次；</p>
			<p>二是加强部门联动，滚动发布《重要气象信息》《气象信息快报》等决策服务材料，开展联合会商8次，并联合水利厅、自然资源厅发布山洪地质灾害气象风险预警预报，并对省防汛办、省应急厅、省地质环境总站开展了叫应服务，省市县三级气象部门均第一时间将相关信息送达本级党政主要负责同志；</p>
			<p>三是全网发布预警信息，通过短信、微信、微博、网站等渠道共发布预警信息1100多条，提醒责任人4500余万人次；气象部门各类新媒体发布预报预警、雨情、科普知识等信息300余条，覆盖过亿人次。</p>
			<div class=t1>
				<img src="http://i.weather.com.cn/images/cn/news/2021/07/20/1626773534293019453.jpg" ><br>
				图为河南嵩山气象站。
			</div>
			<p class=t3>编辑：刘珺</p>
		</div>
		
	</body>
</html>

css文件内容

/* 段落标签首行缩进 */
p {
	text-indent: 2em;
}
/* 消除链接标签下划线 */
a {
	text-decoration: none;
}
/* 设置文章字体、字体大小、行高 */
body {
	font-size: 16px;
	font-family: "microsoft yahei";
	line-height: 28px;
	width: 900px;
}
/* 页面宽度 */
.t0 {
		margin-top: 30px;
		margin-bottom: 20px;
}
/* 内容居中显示*/
.t1 {
	text-align: center;
}
/* 设置字体颜色为灰色且大小为12px */
.t2 {
	color: #888888;
	font-size: 12px;
}
/* 设置字体右对齐且颜色为灰色 */
.t3 {
	color: #888888;
	text-align: right;
}

效果展示：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
原网站网址：http://news.weather.com.cn/2021/07/3480754.shtml

Chrome调试工具

chrome（谷歌）浏览器提供了一个非常好用的调试工具，可以用来调试我们的HTML结构和CSS样式。

1.打开调试工具
打开chrome浏览器，按下F12或者右击页面空白处–>检查。
2.使用调试工具
1）Ctrl + 滚轮 可以放大和缩小开发者工具代码大小；
2）左边是HTML元素结构，右边是CSS样式；
3）右边CSS样式可以改动数值（左右箭头或者直接输入）和查看颜色；
4）Ctrl + 0 复原浏览器大小；
如果点击元素，发现右侧没有样式引入，极可能是类名或者样式引入错误；
5）如果有样式，但是样式前有黄色叹号提示，则是样式属性书写错误。

Emmet语法

Emmet语法的前身是Zen coding，它使用缩写来提高HTML/CSS的编写速度，Vscode和HBuilderX内部已经集成该语法。

1.快速生成HTML结构语法（一下我使用的是HBuilderX）

  • 生成标签，直接输入标签名，直接按tab键或者enter键，就可以直接生完整标签；
  • 如果想要生成多个标签，加上 * 号就可以了，比如输入div*3（无空格），按下tab键可直接生成三个div标签；
  • 如果有父子级的标签，可以用 > 比如输入 ul>li（无空格） 就可以生成<ul><li></li></ul>标签，如果想生成多个ul中有多个li，直接输入 ul>li*3（无空格） ，按下tab键即可，如果想在li标签中加入文字，输入 ul>li{标签$}*3（无空格） ，美元符号表示从一开始递增，可有可无，纯数字则是当文本处理，按下tab键即可得到下面的效果：
		<ul>
			<li>标签1</li>
			<li>标签2</li>
			<li>标签3</li>
		</ul>
  • 如果有兄弟关系的标签，用 + 号就可以，比如 div+p（无空格） ，按下tab键即可，效果如下：
		<div></div>
		<p></p>
  • 如果想生成带有类名或id名字的标签，直接写 .类名 或者 #id名 ，按下tab键即可，默认生成的是div标签，如果生成其他标签，可以使用 标签名.类名 或者 标签名#id名 ，按下tab键即可，效果如下：
		<!-- 输入.nav -->
		<div class="nav"></div>
		<!-- 输入#banner -->
		<div id="banner"></div>
		<!-- 输入p.nav -->
		<p class="nav"></p>
		<!-- 输入ul>li#banner -->
		<ul>
			<li id="banner"></li>
		</ul>
		<!-- 输入ul.nav>li -->
		<ul class="nav">
			<li></li>
		</ul>
  • 如果需要生成有顺序的，可以用自增符号$，使用方法是如下：
		<!-- 输入ul>li{$}*3 -->
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
		</ul>
		<!-- 输入div{可以加文字或者数字，但是只有$会自增}*3 -->
		<div>可以加文字或者数字，但是只有1会自增</div>
		<div>可以加文字或者数字，但是只有2会自增</div>
		<div>可以加文字或者数字，但是只有3会自增</div>
		<!-- 输入p.demo*3 -->
		<p class="demo"></p>
		<p class="demo"></p>
		<p class="demo"></p>
		<!-- 输入p.demo$*3 -->
		<p class="demo1"></p>
		<p class="demo2"></p>
		<p class="demo3"></p>
  • 如果想生成的标签里自带文字，使用{}
		<!-- 输入ul>li{标题1   $} -->
		<ul>
			<li>标题1   1</li>
			<li>标题1   2</li>
			<li>标题1   3</li>
		</ul>

2.快速生成CSS样式标签
基本上是每个单词的第一个字母，数字有单位的加上单位。

		<style type="text/css">
			.one {
				/* 输入w100 tab键*/
				width: 100px;
				/* 输入h100 tab键*/
				height: 100px;
				/* 输入ti2em tab键 */
				text-indent: 2em;
				/* 输入tac tab键 */
				text-align: center;
				/* 输入lh26px tab键 */
				line-height: 26px;
				/* 输入tdn tab键 */
				text-decoration: none;
			}
		</style>

3.快速格式化代码

  • HBuilderX 中快速格式化代码
    右键，然后单击重排代码格式或者快捷键Ctrl+K
    重排代码格式

CSS复合选择器

  • 复合选择器
    在CSS中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上的，对基本选择器进行组合形成的。
  • 复合选择器可以更准确、更高效的选择目标元素（标签）；
  • 符合选择器是由两个或多个基础选择器，通过不同的方式组合而成的；
  • 常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等

1.后代选择器
后代选择器又称包含选择器，可以选择父元素里面的子元素，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔，当标签发生嵌套时，内层标签就成为外层标签的后代。

  • 使用方法1：
元素1 元素2 元素3 ...{样式声明}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 把ol里的li选出来改为deeppink */
			ol li{
				color: deeppink;
			}
			/* 把ol里的li里的a选出来改为deepskynlue且删除下划线 */
			ol li a{
				color: deepskyblue;
				text-decoration: none;
			}
		</style>
	</head>
	<body>
		<ol>
			<li>我是ol 的孩子</li>
			<li>我是ol 的孩子</li>
			<li>我是ol 的孩子</li>
			<li><a href="#">我是li 的孩子</a></li>
		</ol>
		<ul>
			<li>我是ul 的孩子</li>
			<li>我是ul 的孩子</li>
			<li>我是ul 的孩子</li>
		</ul>
	</body>
</html>

后代选择器1

  • 使用方法2：
    基础选择器可以替代元素，有时候元素不唯一的时候，给元素增加一个基础选择器，基础选择器是唯一的，可以更准确的选择出需要修改样式的元素。
基础选择器1 元素2 元素3 ...{样式声明}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
/* 			把第二个ul里的li里的a改变颜色并删除下划线，在第二个ul标签加上一个class以便区分 */
			.nav li a{
				color: crimson;
				text-decoration: none;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>我是ul 的孩子</li>
			<li>我是ul 的孩子</li>
			<li>我是ul 的孩子</li>
			<li><a href="#">我是li 的孩子</a></li>
			<li><a href="#">我是li 的孩子</a></li>
			<li><a href="#">我是li 的孩子</a></li>
		</ul>
		<ul class="nav">
			<li>我是ul 的孩子</li>
			<li>我是ul 的孩子</li>
			<li>我是ul 的孩子</li>
			<li><a href="#">我是li 的孩子</a></li>
			<li><a href="#">我是li 的孩子</a></li>
			<li><a href="#">我是li 的孩子</a></li>
		</ul>
	</body>
</html>

后代选择器2

  • 注意：
    1）元素与元素之间用空格隔开；
    2）前面的元素是父级，最终被修改样式的是最后一级的元素；
    3）元素可以是任何基础选择器。

2.子选择器
子元素选择器（子选择器）只能只能作为某元素的最近一级子元素，简单理解就是选亲儿子元素

元素1>元素2 {样式声明}
  • 子选择器与后代选择器的区别：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 子选择器，选出class="nav"的div标签下一级的a标签 */
			.nav>a {
				color: deeppink;
			}
			/* 选后代择器，选出class="nav"的div标签下所有级别的a标签 */
			.nav a {
				text-decoration: none;
			}
		</style>
	</head>
	<body>
		<div class="nav">
			<a href="#">我是div 的儿子</a>
			<p>
				<a href="#">我是div 的孙子</a>
			</p>
		</div>
	</body>
</html>

只有div下第一级别的a标签改变了颜色，但是div里所有级别的a标签都消除了下划线
子选择器

  • 注意：
    1）元素1和元素2之间用大于号；
    2）元素1是父级，元素2是子级，改变的是元素2的样式；
    3）元素依然可以用基础选择器代替。

3.并集选择器

  • 并集选择器可以选择多组标签，同时为他们定义相同的样式，通常用于集体声明。
  • 并集选择器是各选择器通过英文逗号“,”连接而成，任何形式的选择器都可以作为并集选择器的一部分。
  • 语法：
元素1,元素2 {样式声明}

上述语法表示选择元素1和元素2。

  • 例如：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 把熊大熊二改成深粉色 */
			div,
			p {
				color: deeppink;
			}
			/* 把熊大熊二和小猪佩奇一家改为深粉色 */
			div,
			p,
			.pig li {
				color: deeppink;
			}
			/* 约定的语法规范，并集选择器通常竖着写 */
		</style>
	</head>
	<body>
		<div >熊大</div>
		<p>熊二</p>
		<span>光头强</span>
		<ul class="pig">
			<li>小猪佩奇</li>
			<li>猪爸爸</li>
			<li>猪妈妈</li>
		</ul>
	</body>
</html>

并集选择器

  • 注意：
    1）元素1和元素2中间用英文逗号隔开；
    2）逗号可以理解为和的意思；
    3）元素可以是各个选择器，不仅限于基础选择器，符合选择器也可以。

4.伪类选择器
伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或者选择第一个，第n个元素。
伪类选择器书写最大的特点就是用英文冒号“:”表示，比如:hover、:first-child。

  • 链接伪类选择器
a:link /* 选择所有未被访问的链接 */
a:visited /* 选择所有已被访问的链接 */			a:hover /* 选择鼠标指针位于其上的链接 */			a:active /* 选择活动链接（鼠标按下未弹起的链接） */
  • 例如：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 选择所有未被访问的链接 */
			a:link {
				color: black;
				text-decoration: none;;
			}
			/* 选择所有已被访问的链接 */
			a:visited {
				color: goldenrod;
			} 
			/* 选择鼠标指针位于其上的链接 */
			a:hover {
				color: #00BFFF; 
			}
			/* 选择活动链接（鼠标按下未弹起的链接） */
			a:active {
				color: #008000;
			}
		</style>
	</head>
	<body>
		<a href="https://www.nowcoder.com/" target="_blank">牛客网</a>
		<a href="#">小猪佩奇</a>
	</body>
</html>
  • 链接伪类注意事项：
    1）为了确保生效，请按照LVHA的顺序声明 :link，:visited，:hover，:active；
    2）因为链接在浏览器中具有默认样式，所以在实际开发中都需要给链接单独制定样式。
  • :focus伪类选择器
    :focus 伪类选择器
    用于选取获得焦点（鼠标）的表单元素。
input:focus {
   background-color: yellow;
}
  • 例如：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		/* 把获得光标的input表单选取出来 */
			input:focus {
				background-color: #DC143C;
			}
		</style>
	</head>
	<body>
		<input type="text">
		<input type="text">
		<input type="text">
	</body>
</html>

:focus伪类选择器

复合选择器总结

选择器作用特征使用情况展开符号及其用法
后代选择器用来选择后代元素可以是子孙后代较多各基础选择器用空格隔开
子代选择器只选择下一级的元素只选亲儿子较少各基础选择器之间用大于号隔开
并集选择器选择某些相同样式的元素可用于集体声明较多各选择器（可以是任何选择器）之间用英文逗号隔开
链接伪类选择器选择不同状态的链接跟链接相关较多重点记住 a {} 和 a:hover 实际开发的写法
:focus 选择器选择获得光标的表单跟表单相关较少input:focus 记住这个写法

CSS的元素显示模式

1.什么是元素显示模式

  • 元素显示模式就是元素（标签）以什么方式进行显示，比如div自己独占一行，一行可以放多个span。
  • HTML元素一般分为块元素和行内元素两种类型。
    1）块元素独占一行；
    2）行内元素一行可以有多个

2.块元素
常见的块元素有 <h1>~<h6>、<p>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。

  • 块元素的特点：
    1）比较霸道，自己独占一行；
    2）高度、宽度、外边距以及内边距都可以控制；
    3）宽度默认是容器（父级宽度）的100%；
    4）是一个容器及盒子，里面可以放行内或块级元素。
  • 注意：
    文字类的元素内不能使用块级元素，如p，h1~h6。

3.行内元素
常见行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<u>、<span>等，其中<span>标签是最典型的行内元素标签。有的地方也将行内元素标签成为内联元素。

  • 行内元素的特点：
    1）相邻行内元素在一行上，一行可以显示多个；
    2）高宽直接设置是无效的；
    3）默认宽度就是它本身内容的宽度；
    4）行内元素只能容纳文本或其他行内元素。
  • 注意
    1）链接里面不能再放链接；
    2）特殊情况a里面可以放块级元素，但是给a转换一下块级模式最安全。

4.行内块元素
在行内元素中有几个特殊的标签——<img />、<input />、<td>，他们同时具有块元素和行内元素的特点，有些资料称他们为行内块元素。

  • 行内块元素的特点：
    1）和相邻行内元素（行内块）在一行上，但他们之间会有空白缝隙，一行可以显示多个（行内元素特点）；
    2）默认宽度就是它本身内容的宽度（行内元素特点）；
    3）高度、行高、内边距以及外边距可以控制（块级元素特点）。

5.元素显示模式总结：

元素模式元素排列设置样式默认宽度包含
块级元素一行只能放一个块级元素可以设置感度宽度容器的100%
行内元素一行可以放多个行内元素不可以直接设置宽度高度它本身内容的宽度容纳文本或者其他行内元素
行内块元素一行可以放多个行内块元素可以设置宽度和高度它本身内容的宽度

6.元素显示模式的转换
一个模式的元素需要另一种模式的特性，比如想添加a的触发范围。

  • 转换为块元素：display: block;
  • 转换为行内块元素：display: inline;
  • 转换为行内块元素：display: inline-block;
  • 例如：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			a {
				width: 150px;
				height: 150px;
				background-color: deeppink;
				/* 把行内元素 a 转换为块级元素 */
				display: block;
			}
			div {
				width: 150px;
				height: 150px;
				background-color: cadetblue;
				/* 把块级元素转换成行内元素 */
				display: inline;
			}
			span {
				width: 150px;
				height: 150px;
				background-color: #00FFFF;
				/* 转换成行内块元素 */
				display: inline-block;
			}
		</style>
	</head>
	<body>
		<a href="#">黑马前端教程</a>
		<div >
			我是块级元素
		</div>
		<div >
			我是块级元素
		</div>
		<span>转换为行内块元素</span>
		<span>转换为行内块元素</span>
	</body>
</html>

元素显示模式转换

  • 案例——简洁小米侧边栏：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>简洁小米侧边栏</title>
		<style type="text/css">
		
			a {
				width: 230px;
				height: 40px;
				display: block;
				color: #FFFFFF;
				background-color: #55585A;
				text-decoration: none;
				text-indent: 2em;
				line-height: 40px;
			}
			a:hover {
				background-color: #FF6700;
			}
		</style>
	</head>
	<body>
		<div >
			<a href="#">手机 电话卡</a>
			<a href="#">电视 盒子</a>
			<a href="#">笔记本 平板</a>
			<a href="#">出行 穿戴</a>
			<a href="#">智能 路由器</a>
			<a href="#">健康 儿童</a>
			<a href="#">耳机 音响</a>
		</div>
	</body>
</html>

小米简洁侧边栏

  • 单行文字垂直居中小技巧：
    CSS没有给我们提供文字垂直居中的代码。
    解决方案：让文字的行高等于盒子的高度，就可以让文字在当前盒子内垂直居中。line-height: 所在盒子高度;
  • 单行文字居中的原理：
    单行文字居中原理

CSS背景

通过CSS背景属性，可以给页面元素添加背景样式；
背景样式可以设置背景颜色、背景图片、背景平铺、背景图片位置，背景图像固定等。

1.背景颜色
background-color属性定义了元素的背景颜色值。

background-color: 颜色值;

一般背景的背景颜色默认值是transparent（透明）

2.背景图片
background-image属性定义了元素的背景图像，实际开发中常见于logo或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置（精灵图也是一种运用场景）。

background-image: url(背景图片地址和图片名);
参数值作用
none无背景图（默认的）
url(绝对地址/相对地址)使用绝对地址或相对地址指定背景图像

3.背景平铺
如果需要在HTML页面上对背景图像进行平铺，可以使用background-repeat属性。

参数值作用
repeat背景图像在纵向和横向上平铺（默认的）
no-reoeat背景图像不平铺
repeat-x背景图像横向平铺
repeat-y背景图像纵向平铺

页面元素既可以添加背景颜色，也可以添加背景图片，只不过背景图片会压住背景颜色。

4.背景图片位置
利用background-position属性可以改变图片在背景中的位置。

background-position: x y;

参数代表的意思是：X坐标和Y坐标，可以使用方位名词或者精确单位

参数值说明
length百分数、由浮点数字和单位标识符组成的长度值
positiontop/center/bottom/left/right 方位名词

1）参数是方位名词

  • 如果指定的两个词都是方位名词，则两个值前后顺序无关
  • 如果只指定了一个方位名词，另一个值默认居中对齐
  • 小图标例子：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			h3 {
				width: 181px;
				height: 41px;
				font-style: 12px;
				font-weight: 400;
				line-height: 41px;
				background-image: url(https://game.gtimg.cn/images/js/title/title_sprite.png
);
				background-repeat: no-repeat;
				background-position: left center;
				text-indent: 3em;
			}
		</style>
	</head>
	<body>
		<h3>成长守护平台</h3>
	</body>
</html>

图片位置

  • 超大背景例子：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>超大背景图</title>
		<style type="text/css">
			body {
				background-image: url(img/001.jpg);
				background-repeat: no-repeat;
				background-position: center top;
			}
		</style>
	</head>
	<body>
	</body>
</html>

超大背景位置
2）参数是精确位置

  • 如果参数是精确坐标，那么第一个肯定是X坐标，第二个一定是Y坐标
  • 如果只指定一个数值，那么一定是X坐标，另一个（Y坐标）默认居中

3）参数是混合单位

  • 如果指定的两个值是精确单位和方位名词混合使用，则第一个是X坐标，第二个是Y坐标

5.背景图像固定
background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动
background-attachment后期可以制作视差滚动的效果

background-attachment: scroll/fixed
参数作用
scroll背景图像随内容滚动（默认的是滚动）
fixed背景图像固定

6.背景复合写法

  • 当使用简写属性时，没有特定的书写顺序，一般习惯约定顺序为：background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置。

7.背景色半透明
CSS为我们提供了背景颜色半透明的效果

background: rdba(0,0,0,0.3);
  • 最后一个参数时alpha透明度，取值范围在0~1之间
  • 习惯把透明度0.3的0省掉，写成background: rgba(0,0,0,.3);
  • 注意：盒子半透明是指盒子背景半透明，盒子里面的内容不受影响
  • CSS3新增属性，时IE9+版本才支持的

CSS的背景总结

属性作用值
background-color背景颜色
background-image背景图片
background-repeat是否平铺
background-position背景位置repeat（背景平铺）/no-repeat（背景不平铺）/repeat-x（背景水平平铺）/repeat-y（背景垂直平铺）
background-attachment背景附着scroll（背景滚动）/fixed（背景固定）
背景简写书写更简单背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置
背景色半透明背景颜色半透明background: rdba(0,0,0,0.3); 后面必须是四个值

综合案例-五彩导航

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.nav a {
				display: inline-block;
				width: 120px;
				height: 58px;
				background-color: pink;
				text-align: center;
				line-height: 48px;
				color: #FFFFFF;
				text-decoration: none;
				background-image: ;
			}
			.nav .bg1 {
				background-image: url(img/橙色.png);
			}
			.nav .bg2 {
				background-image: url(img/青色.png);
			}
			.nav .bg3 {
				background-image: url(img/紫色.png);
			}
			.nav .bg4 {
				background-image: url(img/浅紫色.png);
			}
			.nav .bg1:hover {
				background-image: url(img/红色.png);
			}
			.nav .bg2:hover {
				background-image: url(img/蓝色.png);
			}
			.nav .bg3:hover {
				background-image: url(img/绿色.png);
			}
			.nav .bg4:hover {
				background-image: url(img/青色.png);
			}
		</style>
	</head>
	<body>
		<div class="nav">
			<a href="#" class="bg1">五彩导航</a>
			<a href="#" class="bg2">五彩导航</a>
			<a href="#" class="bg3">五彩导航</a>
			<a href="#" class="bg4">五彩导航</a>
		</div>
	</body>
</html>

五彩导航
放上鼠标后的对比图
五彩导航

CSS三大特性

1.层叠性

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

层叠性原则：

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

2.继承性

CSS中的继承：子标签会继承父标签的某些样式，如文本颜色和字号。

  • 恰当的使用继承可以简化代码，降低CSS样式的复杂性
  • 子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）

行高的继承性：

body {
	 font:12px/1.5 Microsoft YaHei;
	 }
  • 行高可以跟单位也可以不跟单位
  • 如果子元素没有设置行高
  • 此时子元素的行高是：当前子元素的文字大小的*1.5
  • body行高1.5这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高

3.优先级

当同一个元素指定多个选择器，就会有优先级的产生。

  • 选择器相同，则执行层叠性
  • 选择器不同，则根据选择器的权重执行
    选择器权重如下表所示：
选择器选择器权重
继承 或者 *0,0,0,0
元素选择器0,0,0,1
类选择器，伪类选择器0,0,1,0
ID选择器0,1,0,0
行内样式 style=""1,0,0,0
!important 重要的∞无穷大

优先级注意事项：

  • 权重是有4位数字组成，但是不会有进位
  • 可以理解为类选择器永远大于元素选择器
  • 等级判断从左向右，如果某一位数值相同，则判断下一位数值
  • 继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0
  • 如果是复合选择器，则会有权重叠加，需要计算权重

盒子模型

1.看透网页布局的本质

网页布局的过程：

  • 先准备好相关的网页元素，网页元素基本都是盒子Box
  • 利用CSS设置好盒子的样式，然后摆放到相应的位置
  • 往盒子里面装内容
  • 网页布局的核心本质：利用CSS摆盒子

盒子模型的组成：把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框、外边距、内边距和实际内容
盒子模型
边框
border可以设置元素的边框。
边框有三部分组成：边框宽度（粗细） 边框样式 边框颜色
语法：

border: border-width || border-style || border-color
属性作用
border-width定义边框粗细，单位是px
border-style边框的样式
border-color边框颜色

CSS边框属性允许你指定一个元素边框的样式和颜色。
边框简写：

border: 1px soild red; /* 没有顺序 */

边框分开写法：

border-top: 1px dolid red; /* 只设定上边框，其余同理 */

表格细线边框
border-collapse属性控制浏览器绘制表格边框的方式，它控制相邻单元格的边框。
语法：

border-collapse:collapse;
  • collapse单词是合并的意思
  • border-collapse:collapse;表示相邻边框合并在一起

边框会影响盒子实际大小
边框会额外增加盒子的实际大小。

  • 测量盒子大小的时候，不量边框
  • 如果测量的时候包括了边框，则需要用width/height减去边框宽度

内边距
padding属性用于设置内边距，即边框与内容之间的距离。

属性作用
padding-left左内边距
padding-right右内边距
padding-top上内边距
padding-bottom下内边距

padding属性（属性简写）可以有一到四个值

值的个数表达意思
padding: 5px;1个值，代表上下左右都有5像素内边距
padding: 5px 10px;2个值，代表上下内边距是5像素，左右内边距是10像素
padding: 5px 10px 20px;3个值，代表上内边距是5像素，左右内边距是10像素，下内边距是20像素
padding: 5px 10px 20px 30px;4个值，代表上内边距是5像素，右内边距是10像素，下内边距是20像素，左内边距是30像素（顺时针）

给盒子指定padding值后：

  • 内容和边框有了距离，添加了内边距
  • padding影响了盒子实际大小
    如果盒子已经有了高度和宽度，此时再指定内边距，会撑大盒子。
    此时可以用width/height减去边框宽度来保证盒子的大小。

如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小。

案例1——小米侧边栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>简洁小米侧边栏</title>
		<style type="text/css">
		
			a {
				width: 200px;
				height: 40px;
				display: block;
				color: #FFFFFF;
				background-color: #55585A;
				text-decoration: none;
				line-height: 40px;
				padding-left: 30PX;
			}
			a:hover {
				background-color: #FF6700;
			}
		</style>
	</head>
	<body>
		<div >
			<a href="#">手机 电话卡</a>
			<a href="#">电视 盒子</a>
			<a href="#">笔记本 平板</a>
			<a href="#">出行 穿戴</a>
			<a href="#">智能 路由器</a>
			<a href="#">健康 儿童</a>
			<a href="#">耳机 音响</a>
		</div>
	</body>
</html>

小米侧边栏

外边距
margin属性用于设置外边距，即控制盒子与盒子之间的距离。

属性作用
margin-left左外边距
margin-right右外边距
margin-top上外边距
margin-bottom下外边距

margin简写方式：

值的个数表达意思
margin: 5px;1个值，代表上下左右都有5像素外边距
margin: 5px 10px;2个值，代表上下内边距是5像素，左右外边距是10像素
margin: 5px 10px 20px;3个值，代表上外边距是5像素，左右外边距是10像素，下外边距是20像素
margin: 5px 10px 20px 30px;4个值，代表上外边距是5像素，右外边距是10像素，下外边距是20像素，左外边距是30像素（顺时针）

外边距可以让盒子水平居中，但必须满足两个条件：

  • 盒子必须制定了宽度（width）
  • 盒子左右的外边距都设置为auto
.header{width: 960px; margin: 2 auto;}

常见的三种写法：

  • margin-left: auto; margin-right: auto;
  • margin: auto;
  • margin: 0 auto;

以方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加text-align: center即可。

外边距合并
使用margin定义块级元素的垂直外边距时，可能会出现外边距的合并。

相邻块元素垂直外边距合并
当上下相邻的两个块级元素（兄弟关系）相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直距离不是margin-top与margin-bottom之和，而是取两个值中的较大者，这种现像被称为相邻块元素垂直外边距的合并。
解决方案：尽量只给一个盒子添加margin值。

嵌套块元素垂直外边距的塌陷
对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。
解决方案：

  • 可以为父元素定义上边框
  • 可以为父元素定义上内边框
  • 可以为父元素添加overflow:hidden

清除内外边距
网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致，因此我们在布局前，首先要清除下网页元素的内外编剧。

* {
  padding: 0; /* 清除内边距 */
  margin: 0; /* 清除外边距 */
 }

注意：行内元素为了照顾兼容性，尽量只设置左右内边距，不要设置上下内外边距。但是转换为块级和行内元素就可以了。

案例2——产品模块

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			a {
				color: #333;
				text-decoration: none;
			}

			body {
				background-color: #f5f5f5;
			}

			.box {
				width: 298px;
				height: 415px;
				margin: 100px auto;
			}

			.box img {
				width: 298px;
			}

			.review {
				height: 70px;
				font-size: 14px;
			}

			.appraise {
				font-size: 12px;
				color: #b0b0b0;
				margin-top: 20px;
				padding: 0 28px;
			}

			.info {
				font-size: 14px;
				margin-top: 15px;
				padding: 0 28px;
			}

			.info h4 {
				display: inline-block;
				font-weight: 400;

			}

			.info span {
				color: #ff6700;
			}

			.info em {
				font-style: normal;
				color: #ebe4e0;
				margin: 0 6px 0 15px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<a href="#"><img src="img/产品模块.jpg"></a>
			<p class="review"><a href="#">快递牛，整体不错蓝牙可以说秒连。红米给力</a></p>
			<div class="appraise">来自于 117384232 的评价</div>
			<div class="info">
				<h4> <a href="#">Redmi AirDots真无线蓝...</a></h4>
				<em>|</em>
				<span> 99.9元</span>
			</div>
		</div>
	</body>
</html>

产品模块
案例3——快报模块

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			.box {
				width: 248px;
				height: 163px;
				border: 1px solid #CCCCCC;
				margin: 100px auto;
			}
			.box h3 {
				height: 32px;
				border-bottom: 1px dotted #CCCCCC;
				font-size: 14px;
				font-weight: 400;
				line-height: 32px;
				padding-left: 15px;
			}
			.box ul li a {
				font-size: 12px;
				color: #666666;
				text-decoration: none;
			}
			.box ul li a:hover {
				text-decoration: underline;
			}
			.box ul li {
				font-style: normal;
				list-style: none;
				padding-left: 20px;
				height: 23px;
				line-height: 23px;
			}
			.box ul {
				margin-top: 7px;
			}
			
		</style>
	</head>
	<body>
		<div class="box">
			<h3>品优购快报</h3>
			<ul>
				<li><a href="#">【特惠】爆款耳机五折秒！</a></li>
				<li><a href="#">【特惠】母亲节，健康好礼低至五折！</a></li>
				<li><a href="#">【特惠】爆款耳机五折秒！</a></li>
				<li><a href="#">【特惠】9.9元洗100张照片</a></li>
				<li><a href="#">【特惠】长虹智能空调立省1000</a></li>
			</ul>
		</div>
	</body>
</html>

快报模块

圆角边框

在CSS3中，新增了圆角边框样式，这样盒子就可以变圆角了。
border-radius属性用于设置元素的外边框圆角。
语法：

border-radius: length;

radius半径（圆的半径原理）：（椭）圆与边框的交集形成圆角效果
radius原理
圆角边框的使用：

  • 参数值可以为数值或百分比的形式
  • 如果是正方形，想要设置为一个圆，把数值修改为高度或宽度的一半即可，或者直接写为50%
  • 如果是矩形，设置为高度的一半就可以做
  • 该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角
  • 分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius

圆角边框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				width: 300px;
				height: 300px;
				background-color: pink;
			}

			.t1 {
				/* 圆角边框，数值或百分比越大，圆角弧度越长，当盒子是正方形时，数值等于正方形边长的一半或为100%时，变成圆形 */
				border-radius: 20px;
			}
			/* 圆形的两种做法 */
			.t2 {
				border-radius: 150px;
			}
			.t3 {
				border-radius: 100%;
			}
			/* 圆角矩形设置为矩形高度的一半 */
			.t4 {
				width: 300px;
				height: 100px;
				border-radius: 50px;
			}
			/* 每个角可以设置不同的弧度 */
			.t5 {
				/* 四个数值从左到右的顺序是左上角、右上角、右下角、左下角
				从左上角顺时针 */
				border-radius: 10px 20px 30px 40px;
			}
			.t6 {
				/* 两个数值从左到右的顺序是左上角右下角、右上角左下角 */
				border-radius: 20px 40px;
			}
			.t7 {
				/* 四个属性分开写 */
				border-top-left-radius: 10px;
				border-top-right-radius: 20px;
				border-bottom-left-radius: 30px;
				border-bottom-right-radius: 40px;
			}
			
		</style>
	</head>
	<body>
		<div class="t1"></div>
		<div class="t2"></div>
		<div class="t3"></div>
		<div class="t4"></div>
		<div class="t5"></div>
		<div class="t6"></div>
		<div class="t7"></div>
	</body>
</html>

盒子阴影

CSS3中新增了盒子阴影，我们可以使用box-shadow属性为盒子添加阴影。
语法：

box-shadow: h-shadow v-shadow blur spread color inset;
值描述
h-shadow必需，水平阴影的位置，允许负值
v-shadow必需，垂直阴影的位置，允许负值
blur可选，模糊距离
spread可选，阴影的尺寸
color可选，阴影的颜色，请参阅CSS颜色值
inset可选，将外部阴影（outset）改为内部阴影

注意：

  • 默认的是外部阴影（outset），但是不可以写这个单词，否则导致阴影无效
  • 盒子阴影不占用空间，不会影响其他盒子排列
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				width: 200px;
				height: 200px;
				background-color: pink;
				margin: 100px auto;
				/* 书写顺序：
				 box-shadow: h-shadow v-shadow blur spread color inset;
				 h-shadow 必需，水平阴影的位置，允许负值（正值阴影在右边，负值在左边）。
				 v-shadow 必需，垂直阴影的位置，允许负值（正值阴影在下边，负值在上边）。
				 blur 可选，模糊距离。
				 spread 可选，阴影的尺寸。
				 color 可选，阴影的颜色。
				 inset 可选，将默认的外部阴影(outset)改为内部阴影，但是不可以直接写outset，否则阴影失效。*/
				/* box-shadow: 10px 10px 10px -4px rgba(0,0,0,.3); */
			}
			/* 原先盒子没有影子，鼠标经过有影子 */
			div:hover {
				box-shadow: 10px 10px 10px -4px rgba(0,0,0,.3);
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

鼠标经过有盒子阴影

文字阴影

在CSS3中，我们可以使用text-shadow属性将阴影应用于文本。
语法：

box-shadow: h-shadow v-shadow blur color;
值描述
h-shadow必需，水平阴影的位置，允许负值
v-shadow必需，垂直阴影的位置，允许负值
blur可选，模糊距离
color可选，阴影的颜色，请参阅CSS颜色值
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				font-size: 50px;
				color: deeppink;
				font-weight: 700;
				/* 书写顺序：
				text-shadow: h-shadow v-shadow blur color;
				 h-shadow 必需，水平阴影的位置，允许负值（正值阴影在右边，负值在左边）。
				 v-shadow 必需，垂直阴影的位置，允许负值（正值阴影在下边，负值在上边）。
				 blur 可选，模糊距离。
				 color 可选，阴影的颜色。 */
				text-shadow: 5px 5px 6px rgba(0,0,0,.3);
			}
		</style>
	</head>
	<body>
		<div>
			小孩过来打扰学习太烦人了，我还得学习文字阴影，更烦了又
		</div>
	</body>
</html>

CSS浮动

传统网页布局的三种方式
网页布局的本质——用CSS来摆放盒子，把盒子摆放到相应的位置。
CSS提供了三种传统布局方式：

  • 普通流（标准流）
  • 浮动
  • 定位
标准流

所谓的标准流，就是标签按照规定好默认方式排列

  • 块级元素会独站一行，从上向下顺序排列
  • 常用块级元素：div、hr、h1~h6、ul、ol、dl、form、table
  • 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行
  • 常用行内元素：span、a、i、em等

以上都是标准流布局，标准流是最基本的布局方式。
实际开发中，一个页面基本都包含了这三种布局方式，后面移动端学习新的布局方式。

浮动

浮动最典型的应用：可以让多个块级元素一行内排列显示
网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动

float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
语法：

选择器 { float: 属性值； }
属性值描述
none元素不浮动
left元素向左浮动
right元素向右浮动

浮动特性
加了浮动之后的元素，会具有很多特性

  • 浮动元素会脱离标准流（脱标），浮动的盒子不再保留原先的位置
  • 浮动的元素会一行内显示并且元素顶部对齐（浮动的元素是互相贴靠在一起的，不会有缝隙，如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐）
  • 浮动的元素（任何元素都可以浮动）会具有行内块元素的特性
  • 如果块级元素盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定
  • 浮动的盒子中间是没有缝隙的，是紧挨着一起的
  • 行内元素同理

浮动元素经常和标准流父级搭配使用
为了约束浮动元素位置，我们网页布局一般采取的策略是：
先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置复合网页布局第一准则。
浮动
浮动布局案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			.box .box2 li {
				float: left;
				width: 234px;
				height: 300px;
				background-color: skyblue;
				list-style: none;
				margin-left: 14px;
			}
			.box {
				width: 1226px;
				height: 615px;
				background-color: pink;
			}
			.box .box1 {
				float: left;
				width: 234px;
				height: 615px;
				background-color: plum;
			}
			.box .box2 {
				float: right;
				width: 992px;
				height: 615px;
				background-color: bisque;
			}
			.top {
				margin-top: 15px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="box1"></div>
			<div class="box2">
				<ul>
					<li>1</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
					<li class="top">5</li>
					<li class="top">6</li>
					<li class="top">7</li>
					<li class="top">8</li>
				</ul>
			</div>
		</div>
	</body>
</html>

浮动布局

浮动布局注意点
  • 浮动和标准流的父盒子搭配使用
    先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置。
  • 一个元素浮动了，理论上其余的兄弟元素也要浮动。
    一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题。浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。
清除浮动

由于父级盒子很多情况下，不方便给高度，不方便给高度，但是子盒子浮动又不占有位置，父盒子高度为0的时候，就会影响下面的标准盒子，所以需要清除浮动。

为什么要清除浮动：

  • 父级盒子没有高度
  • 子盒子浮动了
  • 影响下面的布局了，我们就应该清除浮动

清除浮动方式：

清除浮动的方式优点缺点
额外标签法通俗易懂，书写方便添加许多无意义标签，结构化较差
父级overflow:hidden书写简单溢出影藏
父级after伪元素结构语义化正确由于IE6-7不支持:after，兼容性问题
父级双伪元素结构语义化正确由于IE6-7不支持:after，兼容性问题

清除浮动语法：

属性值描述
left不允许左侧有浮动元素（清除左侧浮动的影响）
right不允许右侧有浮动元素（清除右侧浮动的影响）
both同时清除左右两侧浮动的影响）

实际工作中，几乎只用clear: both;
清除浮动的策略是：闭合浮动

  • 额外标签法
    在浮动的最后一个标签后面增加一个新的标签，然后给新增的标签使用清除浮动属性，并且该新增标签必须是块级标签。
  • 父级overflow:hidden
    给父级添加overflow属性，将其属性设置为hidden、auto、或scroll。
  • :after伪元素法
    :after伪元素方式是额外标签法的升级版，也是给父元素添加。
.clearfix:after {
	content: "";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix { /* IE6、7专有 */
	*zoom: 1;
}
  • 双伪元素清除浮动
    也是给父元素添加。
.clearfix:before,
.clearfix:after {
	content: "";
	display: table;
}
.clearfix:after {
	clear: both;
}
.clearfix { /* IE6、7专有 */
	*zoom: 1;
}
Oliviawanwan
关注
Css样式文档
qq_41743601的博客
07-27 1085
Css样式文档 文章目录Css样式文档一.border（边框）1.分别设置4个边框：2.使用1个border设置所有边框样式3.使用border-style设置边框线性3.使用border-width设置边框线性4.使用border-colore设置边框颜色5.圆角边框设置2.分别设置：3.简介写法设置4个不同得样式二、外边距设置分别设置：简写4个外边距注意的外边距设置外边距合并（非常重要)：三、内边距设置四、伪元素设置1.可设置的内容2.伪元素可以与 CSS 类结合使用：2.1、1个元素可以使用多个伪元素
清除修改删除Vue自带的CSS样式
03-17
清除删除修改Vue自带的CSS样式，在Vue项目中写样式时发现总是出现一些奇怪的样式和字体颜色，后来发现是Vue自带了默认的CSS样式导致的，只要修改Vue自带的CSS样式即可。文件中附有修改样式的css文件以及详细教程。
css样式初始化文件
03-13
css的初始化文件，github上面开源的，故各位“看官”可以自由下载， 有积分的可以下载，没有的https://blog.csdn.net/weixin_42034412/article/details/88533072文章中找github地址，麻烦给个赞哦
引入CSS样式文件
weixin_33795093的博客
10-17 278
一、在"index.html"文件所在的文件夹新建文件夹"css"。二、在"css"文件夹中新建文本文档"index.css"。三、在sublime中打开"index.css"文件。四、将"index.html"文件中的<style></style>部分剪切到"index.css"文件中。（包括<style>和</style>）...
Qt css样式大全+详细书签pdf.zip
12-05
本资源"Qt css样式大全+详细书签pdf.zip"包含了丰富的Qt CSS样式的教程和参考资料，旨在帮助开发者深入理解和掌握Qt界面美化技术。 首先，"Qt css样式大全(整理版） - wang13342322203的博客 - CSDN博客.html"是王...
Terminal-CSS:模拟旧式终端的 CSS 样式
06-15
【Terminal-CSS】是一种独特的CSS样式，其设计灵感源自旧时代的计算机终端，旨在为现代网页带来复古风格的视觉体验。这种样式通过纯CSS技术，能够将网页元素转化为类似早期ASCII字符终端的显示效果，营造出一种仿佛...
CSS学习之一 CSS样式的引入
12-12
2、type，总是设置为“text/css”，描述了使用link加载的数据类型；3、href，值为样式表的URL，可以是相对的也可以是绝对的；4、media，默认值是“all”，说明样式表要运用于表现的媒体，还有其他取值：aural（用于...
使用CollapsingToolbarLayout、Toolbar, CoordinatorLayout, AppBarLayout实现可折叠状态栏
03-11
使用support-design库提供的CollapsingToolbarLayout控件。CollapsingToolbarLayout是一个作用在Toolbar基础之上的布局，它不仅能够展示一个标题，而且可以让Toolbar效果变得更加的丰富..博客地址：http://blog.csdn.net/andrexpert/article/details/61236581
CSS （层叠样式表）
diaoju3333的博客
07-05 315
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。[1] CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的...
css样式
CapejasmineY的博客
08-05 342
CSS样式及选择器的定义、权重
常用的一个CSS样式文件
weixin_30385925的博客
08-31 156
A:link {COLOR: #0066ff; TEXT-DECORATION: none} A:visited {COLOR: #ff66ff; TEXT-DECORATION: none} form {PADDING-RIGHT: 1px; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; MARGIN: 1px; PADDING-TOP: 1px} ...
常用的css样式文件
qq_44743216的博客
06-09 916
css文件
Css样式文档，零基础web前端开发，前端详解
m0_60607371的博客
03-18 1020
现阶段较热门是React、Vue两大框架，两者工作原理上存在共通点，也存在一些不同点，对于校招来说，不需要两个框架都学得特别熟，一般面试官会针对你简历中写的框架进行提问。现阶段较热门是React、Vue两大框架，两者工作原理上存在共通点，也存在一些不同点，对于校招来说，不需要两个框架都学得特别熟，一般面试官会针对你简历中写的框架进行提问。​ 更多伪元素：https://www.w3school.com.cn/css/css_pseudo_elements.asp。
CSS - 导入样式文件的两种方法： link 标签和 @import 指令
热门推荐
kikajack的博客
01-14 1万+
1. link 用法 语法： "url路径" rel="stylesheet" type="text/css" media="媒体查询列表"/> 示例： "common.css" rel="stylesheet" type="text/css" media="print,tv"/> link 是 HTML 文件中的标签，在 标签中使用。如果指定了媒体查询类型，则只有在满足条件的
CSS样式表文件命名
weixin_44462907的博客
01-09 1761
主要的 master.css 模块 module.css 基本共用 base.css 布局、版面 layout.css 主题 themes.css 专栏 columns.css 文字 font.css 表单 forms.css 补丁 mend.css 打印 print.css
CSS入门基础（样式，css文件，精心整理
最新发布
weixin_57485542的博客
03-27 1105
CSS代码保存在扩展名为.css的样式表中. HTML文件引用扩展名为.css的样式表h1{color:red;
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值