嵌入CSS样式的三种方式

内嵌样式

内嵌样式又称行内样式,将CSS样式嵌入到HTML标签中可以很简单的对某个标签单独定义样式

【语法】

<标签 style="样式名:样式值;
			 样式名:样式值;
			 样式名:样式值;"></标签>
			 
<h2 style="color: red;background: yellow;">你好</h2>

内部样式表

内部样式表将CSS从CSS样式冲HTML标签中分离出来,使得HTML代码更加整洁,而且CSS样式可以被多次使用。内部样式表写在<style>标签中的样式声明,仅对当前页面有效

【语法】

<style type="text/css">
	选择器{
		样式名: 样式值;
		样式名: 样式值;
		...
	}
</style>

CSS中最常见的三种选择器：

标签选择器：标签名{…}
id选择器：#id{…}
类选择器：.class{…}

外部样式表

外部样式表是将CSS样式以独立的css文件进行存放,然后再页面中引入该样式文件。外部样式表可以让网站中的部分页面或所有页面引用同一样式文件,使页面的风格保持一致,这样有利于页面样式的维护与更新。

【语法】

<!--第一种方式：引入外部独立的css文件(写在<head>标签中)-->
<link rel="stylesheet" type="text/css" href="./mine.css"/>
<!--第二种方式：导入外部样式表-->
<style type="text/css">
	/*@import ./mine.css;*/
	@import url("./mine.css");
</style>

@charset "utf-8";
p{                         /* 选择器{                */
	color: skyblue;        /*	样式名:样式值;       */
	border: 1px;		   /*	样式名:样式值; ...   */
}                          /* }                     */

链接与导入的区别：
1、隶属关系不同,<link>标签隶属于HTML标签,而@import是CSS提供的载入方式
2、加载时间及顺序不同,使用<link>标签时,浏览器先将外部的css样式加载到网页中然后再进行编译显示。而使用@import时,浏览器先将HTML结构呈现出来,再把外部的css文件加载到网页中。
3、兼容性不同,@import时CSS2.1提出的只兼容IE5以上的版本
4、DOM模型控制样式,使用JavaScript控制DOM改变样式时只能使用<link>标签,而@import不受DOM模型控制

三种方式的优先级

多重样式是指外部样式表、内部样式表、内嵌样式同时应用于页面的某个元素。在多从样式的情况下,样式表的优先级采用就近原则。一般情况下样式表的优先级从高到低的顺序是：内嵌→内部→外部。

CSS选择器

基本选择器

标签选择器：标签名{…}
id选择器： #id{…}
类选择器： .class{…}
通用选择器： *{…}

组合选择器

1、多元素选择器
当多个元素拥有相同的特征时,可以通过多元素选择器统一定义样式。多元素选择器之间用逗号(,)隔开

【语法】

h1,h2,h3{样式名:样式值;...} /*样式作用于所有的h1、h2、h3标签*/

2、后代选择器
后代选择器用于选取某个元素的所有后代元素。后代选择器元素之间用空格隔开

【语法】

div p{样式名:样式值;...} /*样式只作用于div标签中的p标签 不在div标签中的p标签保持原样*/

3、子选择器
子选择器用于选取某个元素的直接子元素(间接子元素不适用)。子选择器之间用大于号(>)隔开

【语法】

div>p{样式名:样式值;...}

<div>
	<span>
		<p>我是间接子元素</p>
	</span>
	<p>我是直接子元素</p>
</div>

注意：当子元素与父元素定义的样式重复时,会覆盖父元素中的样式

4、相邻兄弟选择器
相邻兄弟选择器用于选择紧接在某个元素之后的兄弟元素。相邻兄弟选择器之间用加号(+)隔开

【语法】

h2+p{样式名:样式值;...}

<h2>相邻兄弟选择器</h2>
<p>我是相邻兄弟</p>
<p>我是普通兄弟</p>

5、普通兄弟选择器
普通兄弟选择器是指拥有相同父元素的元素,元素与元素之间不必紧密相连。普通兄弟选择器之间用波浪号(~)隔开

【语法】

h1~p{样式名:样式值;...}

6、属性选择器

选择器类型	语法	示例	描述
存在选择器	[attribute]	p[id]	任何带id属性的<br><br>标签<br><br>
相等选择器	[attribute=value]	p[name=“teaName”]	name属性为teaName的<p>标签
包含选择器	[attribute~=value]	p[name~=“stu”]	name属性中包含stu的<p>标签
连字符选择器	[attribute\|=value]	p[lang\|=“zh”]	匹配属性等于zh或者以zh-开头的所有元素
前缀选择器	[attribute^=value]	p[title^=“zh”]	选择title属性值以zh开头的所有元素
字串选择器	[attribute*=value]	p[title*=“ch”]	选择title属性值包含ch的字符串的所有元素
后缀选择器	[attribute$=value]	p[title$=“th”]	选择title属性值以th结尾的所有元素

CSS样式属性

文本属性

color：设置文本颜色
direction：设置文本方向,取值ltr(从左到右)、rtl(从右到左)inherit
texte-indent：缩进文本,单位em、px或百分比
text-align：水平对齐,取值left、right、center、justify
vertical-align：垂直对齐,取值bottom、top、middle、baseline
word-spacing：字间距,默认为normal或0
letter-spacing：字母间距
text-transform：字符转换,设置文本中字母的大小写,取值none、uppercase、lowercase、capitalize
text-decoration：文本装饰,取值none、underline、overline、line-through、blink
white-space：空白字符,取值normal(忽略多余)、pre(正常显示)、nowrap(文本不换行除非遇到br )

字体属性

color：颜色,例如red、rgb(255,0,0)、#FF0000等格式
font-family：设置字体系列,取值宋体、隶书及Serif、Verdana等
font-size：设置字体尺寸,可以是绝对值也可以时相对值,绝对值从小到大依次为xx-small、x-small、small、medium(默认)、large、x-large、xx-large,单位为pt或em,也可以采用百分比的形式
font-style：设置字体风格,取值normal、italic(斜体)、oblique(倾斜)
font-variant：以小型大写字体或者正常字体显示文本。取值normal、small-caps
font-weight：设置字体粗细,取值bolder(特粗体)、blod(粗体)、normal(正常)、lighter(细体)或100~900之间的9个等级
font：简写属性,作用是把所有针对字体的属性设置在一个声明中
font:italic bold 12px/20px …;
font-height：行间距

背景属性

background 简写属性,作用是将背景属性设置在一个声明中
background-attachment 背景图像是否固定或者随着页面的其余部分滚动取值为scroll(滚动,默认值)、fixed（固定）
background-color 设置元素的背景颜色
background-image 把图像设置为背景,其值为url(bg.jpg)或none
background-position 设置背景图像的起始位置，其值为top、bottom、left、right、center或者具体值、百分比
background-repeat 设置背景图像是否及如何重复,其值为no-repeat(不平铺)、repeat-x(横向平铺)、repeat-y(纵向平铺)、repeat(双向平铺)
background-size：指定背景图片的尺寸
background-origin：相对于什么位置来定位，取值为border-box、padding-box、content-box
background-clip：规定背景绘制的区域，取值域background-origin相同

表格属性

border：设置表格边框的宽度
text-align：水平对齐方式
vertical-align：垂直对齐方式
padding：内边距，设置表格内容和边框的边距
border-collapse：折叠边框，设置是否将边框折叠为单一边框，取值为separate（双边款默认值）、collapse（单边框）
border-spacing：单元格间距，仅用于双边框模式
caption-side：设置表格标题的位置，取值top或bottom

列表属性

list-style-image 将图象设置为列表项标志，取值url(xxx.gif)
list-style-position 设置列表中列表项标志的位置，取值inside、outside
list-style-type 设置列表项标志的类型，取值为none、disc、circle、square、decimal、lower-roman、upper-roman、lower-latin、upper-latin
list-style 简写属性，用于把所有用于列表的属性设置于一个声明中

分类属性

1、cursor属性

<span style="cursor:auto">auto</span><br>
<span style="cursor:crosshair">crosshair</span><br>
<span style="cursor:default">default</span><br>
<span style="cursor:e-resize">e-resize</span><br>
<span style="cursor:help">help</span><br>
<span style="cursor:move">move</span><br>
<span style="cursor:n-resize">n-resize</span><br>
<span style="cursor:ne-resize">ne-resize</span><br>
<span style="cursor:nw-resize">nw-resize</span><br>
<span style="cursor:pointer">pointer</span><br>
<span style="cursor:progress">progress</span><br>
<span style="cursor:s-resize">s-resize</span><br>
<span style="cursor:se-resize">se-resize</span><br>
<span style="cursor:sw-resize">sw-resize</span><br>
<span style="cursor:text">text</span><br>
<span style="cursor:w-resize">w-resize</span><br>
<span style="cursor:wait">wait</span><br>

2、display属性

属性值	描述
none	将元素设置为隐藏状态
block	将元素显示为块级元素,此元素前后会带有换行符
inline	默认值,此元素会被显示为内联元素,元素前后没有换行符

3、position属性

属性值	描述
static	默认值,元素在页面流中正常显示
relative	相对定位,保持其未定位前的形状及所占空间
absolute	绝对定位,相对于浏览器窗口定位,当页面滚动时该元素会随之滚动
fixed	固定定位,相对于浏览器窗口定位,当页面滚动时该元素不会随之滚动

4、float属性

属性值	描述
left	元素浮动到左边界
right	元素浮动到右边界
none	默认值元素不浮动

5、clear属性

属性值	描述
left	清除左侧浮动产生的影响
right	清除右侧产生的影响
both	清除两侧浮动产生的影响
none	默认值允许浮动元素出现在两侧

伪类于伪元素

伪类

伪类于类选择器相似,但在标签中并没有明显的指示。伪类以冒号（:）开始，在类型选择符于冒号之间不能出现空白，冒号之后也不能有空白

伪类名	描述
:active	向被激活的元素添加样式
:focus	向拥有键盘输入焦点的元素添加样式
:hover	当鼠标悬浮在元素上方时，向元素添加样式
:link	向未被访问的链接添加样式
:visited	向已被访问的链接添加样式
:first-child	向元素的第一个子元素添加样式
:lang	向带有指定 lang 属性的元素添加样式
:readonly	向只读元素添加样式
:checked	向被选中的元素添加样式
:enabled	向可用的元素添加样式
:disenabled	向不可用的元素添加样式

<style type="text/css">
	a:link {color: #FF0000}		/* 未访问的链接   */
	a:hover {color: #FF00FF}	/* 鼠标悬停链接上 */
	a:visited {color: #00FF00}	/* 已访问的链接   */
	a:active {color: #0000FF}	/* 选定的链接     */
</style>

为元素

伪类名	描述
:first-letter	向文本的第一个字母添加特殊样式
:first-line	向文本的首行添加特殊样式
:before	在元素之前添加内容
:after	在元素之后添加内容

CSS样式基础

嵌入CSS样式的三种方式

内嵌样式

内部样式表

外部样式表

三种方式的优先级

CSS选择器

基本选择器

组合选择器

CSS样式属性

文本属性

字体属性

背景属性

表格属性

列表属性

分类属性

伪类于伪元素

伪类

为元素

相关文章

热门标签

最新文章

目录