文章目录

前言

  • 样式层叠简单的说,层叠就是对一个元素多次设置同一个样式,这将使用最后一次设置的属性值。
  • 例如对一个站点中的多个页面使用了同一套CSS样式表,而某些页面中的某些元素想使用其他样式。
  • 就可以针对这些样式单独定义一个样式表应用到页面中,这些后来定义的样式将对前面的群式设置进行重写,在浏览器中看到的将是最后面设置的样式效果

css属性组成和作用：属性 : 属性值

p:{
	color: red;
}
/*
	p: 选择符（Selector）
	{}: 声明（Decleration）,声明又包括属性（Properyt）和属性值（Value）
	color: 属性是指定选择符具有的属性, color代表颜色相关
	red: 属性值包括法定属性值和常规的数值加单位, 设置为红色
*/

一、字体属性

语法：{ font : font-style | font-size / line-height | font-family ; }

说明：按以上顺序，size和family固定，不可和其他属性位置互换。

实例：

<style>
	div{
           font: bold italic 30px/2 "Microsoft Yahei","宋体",Arial;
        }
</style>

1.1、字体大小（font-size）

  • font-size：设置字体大小

  • 属性为数值型时，必须给属性值加单位，属性值为0时可以除外。单位还可以是pt，9pt=12px；

  • 示例：

<style>
	div{
		font-size:12px;
	}/*设置div中字体大小为12px(像素)*/
	div p{
		font-size:2em;	/* em单位是相对与父元素字体大小进行取值,1em=父元素文字大小。 */
	}/*设置div中p标签为2倍的父元素div的字体大小，即24px(像素)*/
</style>
  • 属性值分4种：
1. <absolute-size> 绝对大小值 
font-size: xx-small;	/*  xx-small = 9px */
font-size: x-small;		/*  x-small = 11px */
font-size: small;		/*  small = 13px */
font-size: medium;		/*  medium = 16px(浏览器默认值) */
font-size: large;		/*  large = 19px */
font-size: x-large;		/*  x-large = 23px */
font-size: xx-large;	/*  xx-large = 27px */
 
2. <relative-size> 相对大小值
font-size: larger;
font-size: smaller;
 
3. <length> 长度值
font-size: 12px;
font-size: 0.8em;
 
4. <percentage> 百分比值
font-size: 80%;

1.2、字体倾斜（font-style）

  • font-style属性：指定文本的字体样式。
  • 属性值：
属性值描述
normal默认值。浏览器显示一个标准的字体样式。
italic浏览器会显示一个斜体的字体样式。
obliqueitalic和oblique都表示倾斜。不过oblique倾斜幅度要大一点，但一般浏览器对它们的区分不是很明显
  • 示例：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#p1{
				font-style: normal;
			}
			
			#p2{
				font-style: italic;
			}
			
			#p3{
				font-style: oblique ;
			}
		</style>
	</head>
	<body>
		<div style="display: flex;">
			<div style="margin-right: 10px;"> font-style: normal; <p id="p1"> This paragraph contains some text.</p></div>
			<div style="margin-right: 10px;"> font-style: italic; <p id="p2"> This paragraph contains some text.</p></div>
			<div style="margin-right: 10px;"> font-style: oblique; <p id="p2"> This paragraph contains some text.</p></div>
		</div>
	</body>
	<script>
	</script>
</html>
  • 运行结果：

在这里插入图片描述

1.3、字体类型（font-family）

  • font - family属性：指定一个元素的字体。

  • font-family 可以把多个字体名称作为一个"回退"系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。

说明：

  1. 当字体是中文字体时需要加引号：“宋体”
  2. 当英文字体有空格时需要加引号：“Times New Roman”
  3. Windows中文版操作系统下：中文字体默认为宋体或新宋体，英文字体默认为Arial。
  • 示例：
<style>
	div{
           font-family: "微软雅黑","宋体",Arial,"Times New Roman";
        }
</style>

1.4、字体加粗（font-weight）

  • font-weight 属性：设置文本的粗细。

  • 属性值：

属性描述
normal默认值。定义标准的字符。对应的数值为：500
bold定义粗体字符。对应的数值为：600
bolder定义更粗的字符。对应的数值为：900
lighter定义更细的字符。对应的数值为：100
数值在css规范中把字体细分为9个等级（100-900）
  • 示例：
p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}

1.5、小型大写字母（font-variant）

  • font-variant 属性设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小

  • 属性值：

属性描述
normal默认值。浏览器会显示一个标准的字体。
small-caps浏览器会显示小型大写字母的字体。
  • 示例：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#p1{
				font-variant: normal;
			}
			
			#p2{
				font-variant: small-caps;
			}
			
		</style>
	</head>
	<body>
		<div style="display: flex;">
			<div style="margin-right: 10px;"> font-variant: normal; <p id="p1"> This paragraph contains some text.</p></div>
			<div style="margin-right: 10px;"> font-variant: small-caps; <p id="p2"> This paragraph contains some text.</p></div>
		</div>
	</body>
	<script>
	</script>
</html>

在这里插入图片描述

1.6、 @font-face 规则

简介：@font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中，随着@font-face模块的出现，我们在Web的开发中使用字体不怕只能使用Web安全字体（@font-face这个功能早在IE4就支持）

语法：

@font-face { 
	font-family: 'icomoon'; 
	src:url('fonts/icomoon.eot'); 		
	src:url('fonts/icomoon.eot?#iefix') 
	format('embedded-opentype'), url('fonts/icomoon.svg#icomoon') 
	format('svg'), url('fonts/icomoon.woff') 
	format('woff'), url('fonts/icomoon.ttf') 
	format('truetype'); 
	font-weight: normal; 
	font-style: normal; 
}

说明：

  • YourWebFontName:此值指的就是你自定义的字体名称，最好是使用你下载的默认字体，他将被引用到你的Web元素中的font-family。如“font-family:“YourWebFontName”;”
  • source：此值指的是你自定义的字体的存放路径，可以是相对路径也可以是绝路径；
  • format：此值指的是你自定义的字体的格式，主要用来帮助浏览器识别，其值主要有以下几种类型truetype,opentype,truetype-aat,embedded-opentype,avg等；
  • weight和style:这两个值大家一定很熟悉，weight定义字体是否为粗体，style主要定义字体样式，如斜体。

二、文本属性

2.1、文本颜色（color）

  • color属性：指定文本的颜色。

  • 属性值：

属性描述
颜色值比如red, blue, brown, lightseagreen等，不区分大小写
十六进制十六进制符号 #RRGGBB 和 #RGB（比如 #ff0000）。“#” 后跟 6 位或者 3 位十六进制字符（0-9, A-F）。
rgb（三原色）color: rgb(45, 17, 255); 取值可以是 0-255 的整数或百分比。
rgba（三原色 +透明度）color: rgba(45, 17, 255, 0.5); a 表示透明度：0=透明；1=不透明。
  • 示例：
body {
    color:red;
}
h1 {
    color:#00ff00;
}
p {
    color:rgb(0,0,255);
}
span {
    color:rgba(0,0,255,0.5);
}

2.2、文本行高（line-height）

  • line-height属性设置以百分比计的行高， 负值是不允许的
  • 属性值：
属性描述
normal默认。设置合理的行间距
number设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
length设置固定的行间距。
%基于当前字体尺寸的百分比行间距。
  • 说明
> 1. 当**单行文本**的行高**等于**容器高时，可实现单行文本在容器中垂直方向居中对齐；
> 2. 当**单行文本**的行高**小于**容器高时，可实现单行文本在容器中垂直中齐以上的任意位置的定位；
> 3. 当**单行文本**的行高**大于**容器高时，可实现单行文本在容器中垂直中齐以下的任意位置的定位；
> 4. ie6及以下版本存在浏览器兼容问题，尽量不要让行高大于高度
  • 示例：
p.small {line-height:50px}
p.big {line-height:200%}

2.3、文本间距（spacing）

概述：可以设置首行缩进、字间距、词间距

说明：

  1. 首行缩进：{text-indent : value ;} 可以取负值，只对第一行起作用
  2. 字间距； { letter-spacing : value ;} 控制英文单词字母或汉字的字距
  3. 词间距； { word-spacing : value ;} 控制英文单词的词距
  • 示例

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style>
		#h1 {letter-spacing:9px;}
		#h2 {word-spacing:9px;}
		#h3 {text-indent:9px;}
	</style>
	</head>
	<body>
		<h1 id="h1">This is heading 1</h1>
		<h1 id="h2">This is heading 2</h1>
		<h1 id="h3">This is heading 3</h1>
	</body>
	</body>
	<script type="text/javascript">
	</script>
</html>

2.4、垂直对齐（vertical-align）

  • vertical-align：用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。

  • 相对父元素的值：这些值使元素相对其父元素垂直对齐

属性描述
sub使元素的基线与父元素的下标基线对齐
super使元素的基线与父元素的上标基线对齐
text-top使元素的顶部与父元素的字体顶部对齐
text-bottom使元素的底部与父元素的字体底部对齐
middle使元素的中部与父元素的基线加上父元素 x-height 的一半对齐
length使元素的基线对齐到父元素的基线之上的给定长度。可以是负数
percentage使元素的基线对齐到父元素的基线之上的给定百分比，该百分比是line-height属性的百分比。可以是负数。
  • 相对行的值：下列值使元素相对整行垂直对齐
属性描述
top使元素及其后代元素的顶部与整行的顶部对齐
bottom使元素及其后代元素的底部与整行的底部对齐
  • 示例：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div {
				border: 1px red solid;
			}
			span{
				color: greenyellow;
			}
			#sub {
				vertical-align: sub;
			}
			#super {
				vertical-align: super;
			}
			#text-top {
				vertical-align: text-top;
			}
			#text-bottom {
				vertical-align: text-bottom;
			}
			#middle {
				vertical-align: middle;
			}
			#top {
				vertical-align: top;
			}
			#bottom {
				vertical-align: bottom;
			}
		</style>
	</head>
	<body>
		<div>EEE<span id="sub">E:sub</span></div>
		<div>EEE<span id="super">E:super</span></div>
		<div>EEE<span id="text-top">E:text-top</span></div>
		<div>EEE<span id="text-bottom">E:text-bottom</span></div>
		<div>EEE<span id="middle">E:middle</span></div>
		<div>EEE<span id="top">E:top</span></div>
		<div>EEE<span id="bottom">E:bottom</span></div>
	</body>
</html>

在这里插入图片描述

2.5、文本对齐（text-align）

  • text-align：定义行内内容（例如文字）如何相对它的块父元素对齐
属性描述
left行内内容向左侧边对齐
right行内内容向右侧边对齐
center行内内容居中
justify文字向两侧对齐，对最后一行无效
  • 示例：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div {
				border: 1px red solid;
			}
			#left {
				text-align: left;
			}
			#right {
				text-align: right;
			}
			#center {
				text-align: center;
			}
			#justify {
				text-align: justify;
			}
		</style>
	</head>
	<body>
		<div id='left'>这是 left 对齐方式</div>
		<div id='right'>这是 right 对齐方式</div>
		<div id='center'>这是 center 对齐方式</div>
		<div id='justify'>这是 justify 对齐方式</div>
	</body>
	<script>
	</script>
</html>
  • 结果：

在这里插入图片描述

2.6、字大小写（text-transform）

扩展：font-variant: small-caps; 设置为小型大小字母

  • text-transform：指定如何将元素的文本大小写。它可以用于使文本显示为全大写或全小写，也可单独对每一个单词进行操作。
属性描述
none这个关键字阻止所有字符的大小写被转换
uppercase这个关键字强制所有字符被转换为大写
lowercase这个关键字强制所有字符被转换为小写
capitalize单词变成首字母大写，以空格区分单词
  • 示例：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			span {
				border: 1px red solid;
			}
			#uppercase {
				text-transform: uppercase;
			}
			#lowercase {
				text-transform: lowercase;
			}
			#capitalize {
				text-transform: capitalize;
			}
			#none {
				text-transform: none;
			}
		</style>
	</head>
	<body>
		none: <span id='none'>aaBBccDD</span><br><br>
		uppercase: <span id='uppercase'>aaBBccDD</span><br><br>
		lowercase: <span id='lowercase'>aaBBccDD</span><br><br>
		capitalize: <span id='capitalize'>aaBB ccDD</span><br><br>
	</body>
	<script>
	</script>
</html>

在这里插入图片描述

2.7、文本修饰（text-decoration）

  • text-decoration：设置文本上的装饰性线条的外观。
  • 包含：text-decoration-line、text-decoration-color、text-decoration-style 和较新的 text-decoration-thickness的缩写
  • text-decoration-line 属性：设置元素中的文本的修饰类型。
属性描述
none去除修饰， 常用于去除超链接的下划线
underline文本的下方有一条修饰线
overline文本的上方有一条修饰线
line-through有一条贯穿文本中间的修饰线
  • text-decoration-style属性：设定的线的样式。
属性描述
solid实线
double双实线
dotted点划线
dashed虚线
wavy波浪线
  • text-decoration-color属性：用于设置文本修饰线的颜色。
属性描述
颜色值red
16进制值#21ff21
rgb形式rgba(255, 128, 128)
rgba形式rgba(255, 128, 128, 0.5)
  • text-decoration-thickness属性：设置装饰线的厚度。
属性描述
auto由浏览器为文本装饰线选择合适的厚度
lengthpx等长度单位
  • 示例：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div {
				text-decoration: green wavy underline;
			}
		</style>
	</head>
	<body>
		<div>666666666666666666666666666666</div>
	</body>
</html>

在这里插入图片描述

2.8、文本阴影（text-shadow）CSS3

  • text-shadow 属性：应用于阴影文本。

说明：

  • h-shadow：必需。水平阴影的位置。允许负值。
  • v-shadow：必需。垂直阴影的位置。允许负值。
  • blur：可选。模糊的距离。
  • color： 可选。阴影的颜色

注意：text-shadow属性连接一个或更多的阴影文本。属性是阴影，指定的每2或3个长度值和一个可选的颜色值用逗号分隔开来。已失时效的长度为0。

  • 示例：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div {
				border: 1px greenyellow solid;
				margin: 20px;
				height: 100px;
			}

			#div {
				text-shadow: 2px 2px red;
			}
		</style>
	</head>
	<body>
		<div id='div'>文本阴影</div>
	</body>
	<script type="text/javascript">
	</script>
</html>

在这里插入图片描述

2.9、单词换行（word-break）CSS3

  • word-break属性：指定非CJK脚本的断行规则（CJK脚本是中国，日本和韩国脚本）。
  • 属性：
属性值描述
normal使用浏览器默认的换行规则(示例中的谷歌浏览器默认使用的是keep-all)。
break-all允许在单词内换行。
keep-all只能在半角空格或连字符处换行。
  • 示例：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#p1{
				width:100px; 
				border:1px solid #000000;
			}
			
			#p2{
				width:100px; 
				border:1px solid #000000;
				word-break:break-all;
			}
			
			#p3{
				width:100px; 
				border:1px solid #000000;
				word-break:keep-all;
			}
		</style>
	</head>
	<body>
		<div style="display: flex;">
			<div style="margin-right: 10px;"> word-break:normal; <p id="p1"> This paragraph contains some text.</p></div>
			<div style="margin-right: 10px;"> word-break:break-all; <p id="p2"> This paragraph contains some text.</p></div>
			<div style="margin-right: 10px;"> word-break:keep-all; <p id="p3"> This paragraph contains some text.</p></div>
		</div>
	</body>
	<script>
	</script>
</html>
  • 运行结果：
    在这里插入图片描述

2.10、 内容换行（word-wrap）CSS3

  • word-wrap属性：允许长的内容可以自动换行
  • 属性：
属性值描述
normal只在允许的断字点换行（浏览器保持默认处理）。
break-word在长单词或 URL 地址内部进行换行。
  • 示例：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#p1{
				width:100px; 
				border:1px solid #000000;
			}
			
			#p2{
				width:100px; 
				border:1px solid #000000;
				word-wrap:break-word;
			}
			
		</style>
	</head>
	<body>
		<div style="display: flex;">
			<div style="margin-right: 10px;"> word-wrap:normal; <p id="p1"> This paragraph contains some text.</p></div>
			<div style="margin-right: 10px;"> word-wrap:break-word; <p id="p2"> This paragraph contains some text.</p></div>
		</div>
	</body>
	<script>
	</script>
</html>
  • 运行结果：
    在这里插入图片描述

2.11、文本反向（direction + unicode-bidi）

  • direction CSS 属性用于设置文本、表格列和水平溢出的方向。

    • 对于从右到左书写的语言（如希伯来语或阿拉伯语），应将该属性设置为 rtl；
    • 对于从左到右书写的语言（如英语和大多数其他语言），则应将该属性设置为 ltr。

  • unicode-bidi 属性和 direction 属性，决定如何处理文档中的双书写方向文本。

  • 示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
div.ex1
{
	direction:rtl;
	unicode-bidi:bidi-override;
}
</style>
</head>
<body>

<div>一些文本，默认的书写方向。</div>
<div class="ex1">一些文本，从右向左的方向。</div>

</body>
</html>

在这里插入图片描述

三、背景属性

简写：{ background : 属性值1 属性值2 属性值n ;}

3.1、背景颜色（background-color）

语法：background-color：颜色值；

说明：

实例：

在这里插入代码片

3.2、背景图片（background-image）

语法：background-image：url（背景图片的路径及全称）；

说明：加载背景图片必须要有容器区域

  • 容器尺寸等于图片尺寸，背景图片正好显示在容器中；
  • 容器尺寸大于图片尺寸，背景图片将默认平铺
  • 容器尺寸小于图片尺寸，只显示容器范围之内的背景图片

注意：不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张。

实例：

在这里插入代码片

3.3、背景平铺（background-repeat）

语法：background-repeat：值；

说明：no-repeat（不平铺）、repeat（平铺默认值）、repeat-x（横向平铺）、repeat-y（纵向平铺）

实例：

在这里插入代码片

3.4、背景定位（background-position）

语法：background-position：水平方向属性值 垂直方向属性值；

说明：

  • 水平方向值：left/center/righ或数值
  • 垂直方向值：top/center/bottom或数值

实例：

在这里插入代码片

3.5、背景固定（background-attachment）

语法：background-attachment：值；

说明：fixed：固定，不随内容一块滚动；scroll：随内容一块滚动；

实例：

在这里插入代码片

3.6、背景裁剪（background-clip）CSS3

简介：background-clip属性指定背景绘制区域。

语法：background-clip: border-box|padding-box|content-box;

说明：

  • border-box：默认值。背景被裁剪到边框盒。
  • padding-box：背景被裁剪到内边距框。
  • content-box：背景被裁剪到内容框。

实例：

div
div
{
    background-color:yellow;
    background-clip:content-box;
}

3.7、背景尺寸（background-size）CSS3

简介：background-size属性指定背景图片大小。

语法：background-size: length|percentage|cover|contain;

说明：

  • length：设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)
  • percentage：将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)
  • cover：此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。（图片宽高比不变、铺满整个容器的宽高，而图片多出的部分则会被截掉；）
  • contain：此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。（图片自身的宽高比不变，缩放至图片自身能完全显示出来，所以容器会有留白区域；）

实例：

div
{
    background:url(img_flwr.gif);
    background-size:80px 60px;
    background-repeat:no-repeat;
}

3.8、背景原点（background-origin）CSS3

简介：background-origin属性指定background-position属性应该是相对位置。

语法：background-origin: padding-box|border-box|content-box;

说明：

  • border-box：默认值。背景图像填充框的相对位置
  • padding-box：背景图像边界框的相对位置
  • content-box： 背景图像的相对位置的内容框

注意：如果背景图像background-attachment是"固定"，这个属性没有任何效果。
实例：

div
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-position:left;
background-origin:content-box;
}

四、边框属性

  • 简写属性，用于把针对四个边的属性设置在一个声明
p {
    border:5px solid red;
}
/*
	border-width: 5px
	border-color: red
	border-style: solid 
*/

4.1、边框样式（border-style）

值描述
none定义无边框
hidden与 “none” 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突
dotted定义点状边框。在大多数浏览器中呈现为实线
dashed定义虚线。在大多数浏览器中呈现为实线
solid定义实线。
double定义双线。双线的宽度等于 border-width 的值

4.2、边框颜色（border-color）

div{
	border-style:solid;
	border-color: 
}

4.3、边框宽度（border-width）

p
{
    border-style:solid;
    border-width:15px;
}

4.3、盒子阴影（box-shadow）CSS3

简介：box-shadow属性可以设置一个或者多个下拉阴影的框

语法：box-shadow: h-shadow v-shadow blur spread color inset;

说明：

  • h-shadow：必需的。水平阴影的位置。允许负值
  • v-shadow：必需的。垂直阴影的位置。允许负值
  • blur：可选。模糊距离
  • spread：可选。阴影的大小
  • color： 可选。阴影的颜色。
  • inset： 可选。从外层的阴影（开始时）改变阴影内侧阴影

注意：boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。
实例：

div
{
    box-shadow: 10px 10px 5px #888888;
}

4.4、圆角属性（border-radius）CSS3

简介：border-radius 属性，可以给任何元素制作 “圆角”，例如背景、边框及图片等等。

语法：border-radius: 1-4 length|% / 1-4 length|%;

说明：

  • length：定义弯道的形状。
  • %：使用%定义角落的形状。

注意：每个半径的四个值的顺序是：左上角，右上角，右下角，左下角。
实例：

div
{
    border:2px solid;
    border-radius:25px;
}

4.5、图片边框（border-image）CSS3

简介： border-image 属性可以使用图像创建一个边框

语法：border-image: source slice width outset repeat|initial|inherit;

说明：
-border-image-source：用于指定要用于绘制边框的图像的位置

  • border-image-slice：图像边界向内偏移
  • border-image-width： 图像边界的宽度
  • border-image-outset：用于指定在边框外部绘制 border-image-area 的量
  • border-image-repeat： 用于设置图像边界是否应重复（repeat）、拉伸（stretch）或铺满（round）。

注意：boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。
实例：

div
{ 
    border-image: url(border.png) 30 round;
}

五、溢出处理

5.1、溢出换行（white-space）

  • 参数
属性值描述
normal默认。空白会被浏览器忽略。
pre空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签
nowrap文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止
pre-wrap保留空白符序列，但是正常地进行换行
pre-line合并空白符序列，但是保留换行符
  • 示例：
    在这里插入图片描述
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style>
		#nowrap{white-space:nowrap;}
		#pre{white-space:pre;}
		#pre-wrap{white-space:pre-wrap;}
		#pre-line{white-space:pre-line;}
	</style>
	</head>
	<body>
		<h4>normal：</h4>
		<p id="normal">This is some text    1. This is some text2. This is some text3. This is some text4.</p>
		<h4>nowrap：</h4>
		<p id="nowrap">This is some text    1. This is some text2. This is some text3. This is some text4.</p>
		<h4>pre：</h4>
		<p id="pre">This is some text    1. This is some text2. This is some text3. This is some text4.</p>
		<h4>pre-wrap：</h4>
		<p id="pre-wrap">This is some text    1. This is some text2. This is some text3. This is some text4.</p>
		<h4>pre-line：</h4>
		<p id="pre-line">This is some text    1. This is some text2. This is some text3. This is some text4.</p>
	</body>
	</body>
	<script type="text/javascript">
	</script>
</html>

5.2、溢出处理（overflow）

  • overflow：设置了元素溢出时所需的行为
  • overflow-x 设置了当内容溢出块级元素的左右两侧时所显示的内容。
  • overflow-y 设置了当内容溢出块级元素的上下两侧时所显示的内容。
属性描述
visible默认值，内容不会被修剪，会呈现在元素框之外
hidden溢出部分隐藏；并且其余内容是不可见的
scroll溢出部分隐藏；不管是否溢出，浏览器都会显示滚动条
auto溢出部分隐藏；溢出了浏览器会显示滚动条，没溢出浏览器就不显示滚动条
inherit规定应该从父元素继承overflow属性的值

5.3、溢出省略（text-overflow）

  • text-overflow ：用于确定如何提示用户存在隐藏的溢出内容。其形式可以是裁剪、显示一个省略号（“…”）。

  • 注意：并不会强制“溢出”事件的发生，因此为了能让文本能够溢出容器，要实现溢出时产生省略号的效果还需要定义：

.div {
	width: 100px; /* px、%都可以 */
	overflow: hidden;	/* 这里必须设置为溢出内容为隐藏 */
	white-space: nowrap; 	/* 强制文本在一行内显示,  这里必须是单行文本*/
	text-overflow: ellipsis; /* 设置溢出文本显示为省略号*/
}
  • 示例：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div {
				width: 100px; /* px、%都可以 */
				overflow: hidden;	/* 这里必须设置为溢出内容为隐藏 */
				white-space: nowrap; 	/* 强制文本在一行内显示,  这里必须是单行文本*/
				text-overflow: ellipsis; /* 设置溢出文本显示为省略号*/
			}
		</style>
	</head>
	<body>
		<div id='div'>6666666666666666666666666</div>
	</body>
	<script type="text/javascript">
	</script>
</html>

在这里插入图片描述

------------------------------------------------------------------------

十、其他属性：

列表样式（list-style）

简写：{ list-style: ; }

说明：

  1. 定义列表符合样式：{list-style : 值 ;}
    取值：disc（实心圆）、circle（空心圆）、square（实心方块）、none（去除样式）
  2. 图片作为列表符号： { list-style-image : url(路径) ;}
    所使用图片的路径及全称
  3. 定义列表符号位置： { list-style-position : 值 ;}
    取值：outside（外边）、inside（里边）

实例：常用属性list-style: none; 去除列表样式

<style>
	li{
		list-style-type: none;
        list-style-image:url(images/list-style.png) ;
        list-style-position: inside;
        list-style: none;
        }
</style>

轮廓属性（outline）

  • 轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
  • 轮廓（outline）属性指定元素轮廓的样式、颜色和宽度。
属性说明值
outline在一个声明中设置所有的轮廓属性outline-color、outline-style、outline-width
outline-color设置轮廓的颜色color-name、hex-number、rgb-number
outline-style设置轮廓的样式none、dotted、dashed、solid、double、groove、ridge、inset、outset
outline-width设置轮廓的宽度thin、medium、thick、length
  • 示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<style>
p 
{
	border:1px solid red;
	outline:green dotted thick;
}
</style>
</head>

<body>
<p><b>注意:</b> 如果只有一个 !DOCTYP E指定 IE8 支持 outline 属性。</p>
</body>
</html>
  • 结果：

在这里插入图片描述

类型定义（display）

  • display 属性规定元素应该生成的框的类型
属性说明
none此元素不会被显示。
block此元素将显示为块级元素，此元素前后会带有换行符。
inline默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block行内块元素。
list-item此元素会作为列表显示。
run-in此元素会根据上下文作为块级元素或内联元素显示。
table此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row此元素会作为一个表格行显示（类似 <tr>）。
table-column-group此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column此元素会作为一个单元格列显示（类似 <col>）
table-cell此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption此元素会作为一个表格标题显示（类似 <caption>）

显示隐藏（display、visibility）

  • visibility:hidden：可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。
  • 也就是说，该元素虽然被隐藏了，但仍然会影响布局。
属性说明
visible默认值。元素是可见的
hidden元素是不可见的。
collapse当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 “hidden”
  • display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。
  • 也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

设置透明（opacity）

  • 设置一个div元素的透明度级别：从0.0（完全透明）到1.0（完全不透明）

  • 示例：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: #4CAF50;
  padding: 10px;
}

div.first {
  opacity: 0.1;
}

div.second {
  opacity: 0.3;
}

div.third {
  opacity: 0.6;
}
</style>
</head>
<body>

<h1>透明框</h1>
<p>当使用 opacity 属性为元素背景添加透明度时，其所有子元素也将变为透明。这可能会使完全透明的元素内的文本难以阅读：</p>

<div class="first"><p>opacity 0.1</p></div>
<div class="second"><p>opacity 0.3</p></div>
<div class="third"><p>opacity 0.6</p></div>
<div><p>opacity 1 (default)</p></div>

</body>
</html>
  • 结果：
    在这里插入图片描述

可拉伸的（resize）

resize 不适用于下列元素：内联元素、overflow 属性设置为 visible 的块元素。

  • resize：用于设置元素是否可调整尺寸，以及可调整的方向。
属性描述
none元素不提供用户可控的调整其尺寸的方法。
both元素显示可让用户调整其尺寸的机制，可沿水平和竖直方向调整尺寸。
horizontal元素显示可让用户沿水平方向调整其尺寸的机制
vertical元素显示可让用户沿竖直方向调整其尺寸的机制
  • 必须配合overflow: auto;使用
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div {
				border: 1px red solid;
				margin: 20px;
				height: 100px;
			}

			#both {
				resize: both;
				overflow: auto;
			}

			#horizontal {
				resize: horizontal;
				overflow: auto;
			}

			#vertical {
				resize: vertical;
				overflow: auto;
			}
		</style>
	</head>
	<body>
		<div id='both'>both</div>
		<div id='horizontal'>horizontal</div>
		<div id='vertical'>vertical</div>
	</body>
	<script type="text/javascript">
	</script>
</html>

在这里插入图片描述

光标类型（cursor）

  • cursor：设置光标的类型（如果有），在鼠标指针悬停在元素上时显示相应样式。

在这里插入图片描述

  • 示例：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>一颗不甘坠落的流星</title>
		<style>
			div {
				width: 50px;
				height: 50px;
				border: 1px solid red;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

在这里插入图片描述

# css
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

解锁HDC 2024之旅：从购票到报名，全程攻略

avatar 华为云开发者联盟
cover

从原始边列表到邻接矩阵Python实现图数据处理的完整指南

avatar 华为云开发者联盟
cover

华为云云原生FinOps解决方案，释放云原生最大价值

avatar 华为云开发者联盟