Web笔记（二）---CSS基础_style标签包含在什么标签中-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42217191/article/details/105406714

本文深入讲解了CSS样式的三种引入方式，包括内部样式表、行内式和外部样式表的使用方法，以及它们各自的优缺点。同时，介绍了CSS基础选择器、复合选择器、书写规范、三大特性等内容，帮助读者全面掌握CSS样式应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

看视频配套笔记~

引入CSS样式

内部样式表

内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义

<head>
<style type="text/CSS">
    选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>

语法中，style标签一般位于head标签中title标签之后，也可以把他放在HTML文档的任何地方。

type=“text/CSS” 在html5中可以省略，可以写也可以省略。

行内式（内联样式）

内联样式，又有人称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式，其基本语法格式如下：

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

语法中style是标签的属性，实际上任何HTML标签都拥有style属性，用来设置行内式。其中属性和值的书写规范与CSS样式规则相同，行内式只对其所在的标签及嵌套在其中的子标签起作用。

外部样式表（外链式）

链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中，其基本语法格式如下：

<head>
  <link href="CSS文件的路径"  rel="stylesheet" />
</head>

该语法中，link标签需要放在head头部标签中，并且必须指定link标签的三个属性，具体如下：

href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
type：定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。
rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。

三种样式表比较

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

----css基础选择器----

css样式规则:“键值对”

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

1.标签选择器（元素选择器）

标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

2.类选择器 .

.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
标签调用的时候用 class=“类名”  即可。

1.长名称或词组可以使用中横线来为选择器命名,不建议使用“_”下划线来命名CSS选择器。
2.不要纯数字、中文等命名， 尽量使用英文字母来表示。

**多类名选择器：**给标签指定多个类名，从而达到更多的选择目的。

<div class="pink fontWeight font20">亚瑟</div>

3. id选择器

#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

id选择器和类选择器最大的不同在于使用次数上。
类选择器可以用多次，id选择器只能用一次。

4.通配符选择器

匹配页面中所有的元素

* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

清除所有HTML标记的默认边距。

* {
  margin: 0;                    /* 定义外边距*/
  padding: 0;                   /* 定义内边距*/
}

CSS常用样式属性

字体样式

font-size:字号大小px；

font-family:字体；

p{ font-family:"微软雅黑";}

注意：在文件编码（GB2312、UTF-8 等）不匹配时会产生乱码的错误。
xp 系统不支持类似微软雅黑的中文。

方案一：可以使用英文来替代。比如 font-family:“Microsoft Yahei”。

方案二：在 CSS 直接使用 Unicode 编码来写字体名称可以避免这些错误。使用 Unicode 写中文字体名称，浏览器是可以正确的解析的。

font-family: “\5FAE\8F6F\96C5\9ED1”，表示设置字体为“微软雅黑”。

可以通过escape() 来测试属于什么字体。

1.现在网页中普遍使用14px+，尽量使用偶数的数字字号（ie6等老式浏览器支持奇数会有bug）；
2.各种字体之间必须使用英文状态下的逗号隔开，中文字体需要加英文引号，英文字体一般不需要加引号；
3.当需要设置英文字体时，英文字体名必须位于中文字体名之前；
4.如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的引号；例如font-family: "Times New Roman";。
5.尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。

font-weight:字体粗细；

font-weight属性用于定义字体的粗细

其可用属性值：normal、bold、bolder、lighter、100~900（100的整数倍）。

数字 400 等价于 normal，而 700 等价于 bold。

font-style:字体风格

字体倾斜除了用 i  和 em 标签之外，可以使用CSS 来实现，但是CSS 是没有语义的。
font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：
normal：默认值，浏览器会显示标准的字体样式。
italic：浏览器会显示斜体的字体样式。
oblique：浏览器会显示倾斜的字体样式。

font:综合设置字体样式 ※

font属性用于对字体样式进行综合设置，其基本语法格式如下：

选择器{font: font-style  font-weight  font-size/line-height  font-family;}

1.必须按顺序书写，不能更换顺序，各个属性以空格隔开。

2.其中不需要设置的属性可以省略（取默认值），

3.必须保留font-size和font-family属性，否则font属性将不起作用。

文本外观属性

color:文本颜色

1.预定义，如red，green，blue等。

2.**十六进制**，如#FF0000，#FF6600，#29D794等。实际工作中，十六进制是最常用的定义颜色的方式。

3.RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。

屏幕拾色器：faststone capture

line-height:行间距

line-height常用的属性值单位有三种，分别为**像素px**，相对值em和百分比%；

实际工作中使用最多的是像素px。一般情况下，行距比字号大7~8像素左右就可以了。

行间距=盒子高度可以让文本垂直居中

text-align:水平对齐方式

text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性。其可用属性值如下：

left：左对齐（默认值）

right：右对齐

center：居中对齐

text-indent:首行缩进

text-indent属性用于设置首行文本的缩进。

其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%。

允许使用负值, 建议使用em作为设置单位。

1em 就是一个字的宽度，如果是汉字的段落， 1em 就是一个汉字的宽度

text-decoration 文本的装饰

text-decoration   通常我们用于给链接修改装饰效果

值	描述
none	默认。定义标准的文本。
underline	下划线
overline	上划线
line-through	删除线

----CSS复合选择器----

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

1.后代选择器空格

后代子元素

 .demo h3{color: red;}

2.子元素选择器 >

直接子元素

 .demo > h3 {color: red;}

3.交集选择器

第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格。

/*例：类名为.one的段落标签执行颜色为红色。*/
p.one{
color: red;
}

4.并集选择器，

适合集体声明。

/*例： .one 和 p  和 #test 这三个选择器都会执行颜色为红色。*/
.one,p,#test{
color: #F00;
}

5.伪类选择器

链接伪类选择器

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

顺序：lvha

CSS标签显示模式

css注释

 /*  需要注释的内容  */

块级元素和行内元素

每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等；

其中<div>标签是最典型的块元素。

行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等；

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

块级元素和行内元素区别

块级元素的特点：
（1）总是从新行开始
（2）高度，行高、外边距以及内边距都可以控制。
（3）宽度默认是容器的100%
（4）可以容纳内联元素和其他块元素。

行内元素的特点：
（1）和相邻行内元素在一行上。
（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
（3）默认宽度就是它本身内容的宽度。
（4）行内元素只能容纳文本或则其他行内元素。

行内块元素

在行内元素中有几个特殊的标签——、、，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。

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

标签显示模式转换 display

块转行内：display:inline;

行内转块：display:block;

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

行内块元素和行内元素可以当做文本使用text-line

----CSS书写规范----

空格规范

【强制】 1.选择器与 { 之间必须包含空格。
【强制】 2.属性名与之后的 : 之间不允许包含空格，
【强制】 3. ：与属性值之间必须包含空格。

.selector {
	font-size: 12px;
 }

选择器规范

【强制】当一个 rule 包含多个 selector 时，每个选择器声明必须独占一行。

.post,
.page,
.comment {
    line-height: 1.5;
}

【建议】选择器的嵌套层级应不大于 3 级，位置靠后的限定条件应尽可能精确。

#username input {}
.comment .avatar {}

属性规范

【强制】1. 属性定义必须另起一行。
【强制】2.属性定义后必须以分号结尾。

.selector {
    margin: 0;
    padding: 0;
}

CSS 三大特性

1.层叠：

一般情况下，如果出现样式冲突，则会采取就近原则，按照CSS书写的顺序，以最后的样式为准。

2.继承

书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。

3.CSS优先级

继承或者* 的贡献值为	0,0,0,0
每个元素（标签）贡献值为	0,0,0,1
每个类，伪类贡献值为	0,0,1,0
每个ID贡献值为	0,1,0,0
每个行内样式贡献值	1,0,0,0
每个!important贡献值重要的	∞ 无穷大

例子：

div ul  li   ------>      0,0,0,3

.nav ul li   ------>      0,0,1,2

a:hover      -----—>      0,0,1,1

.nav a       ------>      0,0,1,1   

#nav p       ----->       0,1,0,1

CSS 背景属性

背景图background-image

background-image : none | url (url) /*默认为none*/

背景图片后面的地址，url不要加引号。

背景平铺background-repeat

background-repeat : repeat | no-repeat | repeat-x | repeat-y

repeat : 　背景图像在纵向和横向上平铺（默认的）

no-repeat : 　背景图像不平铺

repeat-x : 　背景图像在横向上平铺

repeat-y : 　背景图像在纵向平铺

设置背景图片时，默认把图片在水平和垂直方向平铺以铺满整个元素。

背景位置background-position

background-position : length || length

background-position : position || position

注意：

position 后面是x坐标和y坐标。可以使用方位名词或者精确单位。
如果只写一个方位名词，另外一个默认是居中的
如果和精确单位和方位名字混合使用，则必须是x坐标在前，y坐标后面。比如 background-position: 15px top; 则 15px 一定是 x坐标 top是 y坐标。

背景附着background-attachment

设置或检索背景图像是随对象内容滚动还是固定的。

background-attachment : scroll | fixed

scroll : 　背景图像随内容滚动(默认)
fixed : 　背景图像固定

背景简写

background属性的值的书写顺序官方并没有强制标准。

为了可读性，建议如下写：

background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
background: transparent url(image.jpg) repeat-y  scroll 50% 0 ;

背景透明(CSS3)

CSS3支持背景半透明的写法语法格式是:

background: rgba(0,0,0,0.3);

最后一个参数是alpha 透明度取值范围 0~1之间

注意：背景半透明是指盒子背景半透明，盒子里面的内容不收影响。

----CSS3伪类选择器----

1.结构(位置)伪类选择器

:first-child :选取属于其父元素的首个子元素的指定选择器
:last-child :选取属于其父元素的最后一个子元素的指定选择器
:nth-child(n) ：匹配属于其父元素的第 N 个子元素，不论元素的类型
:nth-last-child(n) ：选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。
n 可以是数字、关键词或公式

2.属性选择器

/* 获取到 拥有 该属性的元素 */
div[class^=font] { /*  class^=font 表示 font 开始 */
			color: pink;
		}
div[class$=footer] { /*  class$=footer 表示 footer 结束*/
			color: skyblue;
		}
div[class*=tao] { /* class*=tao  *=  表示tao 在任意位置都可以 */
			color: green;
		}

3.伪元素选择器

E::first-letter文本的第一个单词或字;
E::first-line 文本第一行；
E::selection 可改变选中文本的样式；
E::before和E::after
在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用。

div::befor {
  content:"开始";
}
div::after {
  content:"结束";
}

css3多媒体标签

1.多媒体 embed

embed可以用来插入各种多媒体，格式可以是 Midi、Wav、AIFF、AU、MP3等等。url为音频或视频文件及其路径，可以是相对路径或绝对路径。

<embed src="http://player.youku.com/player.php/sid/XMTI4MzM2MDIwOA==/v.swf" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>

2.多媒体 audio(H5)

HTML5通过标签来解决音频播放的问题。

附加属性：

autoplay 自动播放

controls 是否显不默认播放控件

loop 循环播放如果这个属性不写默认播放一次 loop 或者 loop = “loop” 表示无限循环
兼容替换格式

3.多媒体 video(H5)

附加属性：

autoplay 自动播放

controls 是否显示默认播放控件

loop 循环播放

width 设置播放窗口宽度

height 设置播放窗口的高度
兼容格式选择

H5常用标签

header：定义文档的页眉头部
nav：定义导航链接的部分
footer：定义文档或节的页脚底部
article：定义文章。
section：定义文档中的节（section、区段）
aside：定义其所处内容之外的内容侧边
datalist 标签定义选项列表。请与 input 元素配合使用该元素
fieldset 元素可将表单内的相关元素分组，打包 legend 搭配使用

<header> 语义 :定义页面的头部  页眉</header>
<nav>  语义 :定义导航栏 </nav> 
<footer> 语义: 定义 页面底部 页脚</footer>
<article> 语义:  定义文章</article>
<section> 语义： 定义区域</section>
<aside> 语义： 定义其所处内容之外的内容 侧边</aside>
<input type="text" value="请输入明星" list="star"/>
	<datalist id="star">
		<option value="刘德华">刘德华</option>
		<option value="刘若英">刘若英</option>
		<option value="刘晓庆">刘晓庆</option>
		<option value="戚薇">戚薇</option>
		<option value="戚继光">戚继光</option>
	</datalist>
	<fieldset>
    		<legend>用户登录</legend>  标题
    		用户名: <input type="text"><br /><br />
    		密　码: <input type="password">
</fieldset>

新增input类型与属性

类型****	使用示例****	含义****
email****	`<input type="email">`	输入邮箱格式
tel****	`<input type="tel">`	输入手机号码格式
url****	`<input type="url">`	输入url格式
number****	`<input type="number">`	输入数字格式
search****	`<input type="search">`	搜索框（体现语义化）
range****	`<input type="range">`	自由拖动滑块
time****	`<input type="time">`	小时分钟
date****	`<input type="date">`	年月日
datetime****	`<input type="datetime">`	时间
month****	`<input type="month">`	月年
week****	`<input type="week">`	星期年

属性****	用法****	含义****
placeholder****	`<input type="text" placeholder="请输入用户名">`	占位符当用户输入的时候里面的文字消失删除所有文字，自动返回
autofocus****	`<input type="text" autofocus>`	规定当页面加载时 input 元素应该自动获得焦点
multiple****	`<input type="file" multiple>`	多文件上传
autocomplete****	`<input type="text" autocomplete="off">`	规定表单是否应该启用自动完成功能有2个值，一个是on 一个是off on 代表记录已经输入的值 1.autocomplete 首先需要提交按钮 2.这个表单您必须给他名字
required****	`<input type="text" required>`	必填项内容不能为空
accesskey****	`<input type="text" accesskey="s">`	规定激活（使元素获得焦点）元素的快捷键采用 alt + s的形式

放一个案例：

<form action="">
  <fieldset>
    <legend>学生档案</legend>
    <label for="userName">姓名:</label>
    <input type="text" name="userName" id="userName" placeholder="请输入用户名"> <br>
    <label for="userPhone">手机号码:</label>
    <input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}$"><br>
    <label for="email">邮箱地址:</label>
    <input type="email" required name="email" id="email"><br>
    <label for="collage">所属学院:</label>
    <input type="text" name="collage" id="collage" list="cList" placeholder="请选择"><br>
    <datalist id="cList">
      <option value="前端与移动开发学院"></option>
      <option value="java学院"></option>
      <option value="c++学院"></option>
    </datalist><br>
    <label for="score">入学成绩:</label>
    <input type="number" max="100" min="0" value="0" id="score"><br>
   <form action="">
    <fieldset>
    	<legend>学生档案思密达</legend>
    	<label>姓名: <input type="text" placeholder="请输入学生名字"/></label> <br /><br />
    	<label>手机号: <input type="tel" /></label> <br /><br />
    	<label>邮箱: <input type="email" /></label> <br /><br />
    	<label>所属学院:  <input type="text" placeholder="请选择学院" list="xueyuan"/>
    	<datalist id="xueyuan">
    		<option>java学院</option>
    		<option>前端学院</option>
    		<option>php学院</option>
    		<option>设计学院</option>
    	</datalist>

    	<br /><br />

    	<label>出生日期:   <input type="date" /></label> <br /><br />
    	<label>成绩:  <input type="number" /></label> <br /><br />
    	<label>毕业时间:  <input type="date" /></label> <br /><br />
    	<input type="submit" />  <input type="reset" />
    </fieldset>
    </form>
    <label for="inTime">入学日期:</label>
    <input type="date" id="inTime" name="inTime"><br>
    <label for="leaveTime">毕业日期:</label>
    <input type="date" id="leaveTime" name="leaveTime"><br>
    <input type="submit">
  </fieldset>
</form>