CSS样式基础

x33g5p2x  于2022-03-15 转载在 其他  
字(6.4k)|赞(0)|评价(0)|浏览(221)

嵌入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在元素之后添加内容

相关文章