CSS小部分内容

最新推荐文章于 2024-07-24 16:14:10 发布

betterIatethanne

最新推荐文章于 2024-07-24 16:14:10 发布

阅读量27

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/betterIatethanne/article/details/129975233

版权

CSS 概述

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。

浏览器缺省设置
外部样式表
内部样式表（位于 <head> 标签内部）
内联样式（在 HTML 元素内部）

因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：<head> 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。

使用CSS的三种方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css</title>
		<style>
				h1{
					color: red;
				}
			</style>
			<link rel="stylesheet" href="css/css练习.css">
	</head>
	<body>
		<h1>使用css的三种方式</h1>
		<ul>
			<li style="color: aqua;">1.直接使用style属性 ，在标签中直接使用，内联，不建议使用</li>
			<li>2.使用style标签，所有的样式写在标签中，不太推荐，内部</li>
			<li>3.使用外部链接，推荐使用</li>
		</ul>
	</body>
</html>

CSS文本：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本</title>
		<style>
			p{
				text-indent: 5em;/* 首行缩进2个字符 */
			}
			.ta1{
				text-align: left;/* 默认左对齐 */
			}
			.ta2{
				text-align: right;/* 右对齐 */
			}
			.ta3{
				text-align: center;/* 居中对齐 */
			}
			.ta4{
				text-align: justify;/* 两端对齐 */
			}
			.p1{
				word-spacing: 5em;/* 单词之间的距离，只对英文生效 */
			}
			.p2{
				letter-spacing: 10px;/* 每个字符之间的距离 */
			}
			.p3{
				/* text-transform 
				uppercase 变大写
				lowercase 变小写
				capitalize 首字母大写*/
				text-transform: capitalize;
				/* underline： 下划线
				 overline： 上划线
				 line-through ：删除线，贯穿线
				 */
				text-decoration:line-through;
				/* 文本方向：ltr从左到右默认 */
				direction: ltr;
			
			}
			.a1{
				/* 去除超链接的下划线 */
				text-decoration: none;
				
				
			}
			.p4{
				
				/*值       描述
				normal默认。 空白会被浏览器忽略。
				pre 空白会被浏览器保留。其行为方式类似HTML中的<pre>标签。
				nowrap 文本不会换行，文本会在同一行上继续，直到遇见<br>标签为止。
				 pre-wrap  保留空白符序列，但是正常换行
				pre-line; 合并空白符序列，但是保证换行符*/
				white-space: pre-line;
			}
		</style>
	</head>
	<body>
		<h1>文本属性</h1>
		<p>首行缩进5个字符，text-indent
可以为所有元素设置背景色，这包括 body 一直到 em 和 a 等行内元素。

background-color 不能继承，其默认值是 transparent。transparent 有“透明”之意。也就是说，如果一个元素没有指定背景色，那么背景就是透明的，这样其祖先元素的背景才能可见。


背景图像</p>
		<h2 class="ta1">对齐方式：左对齐</h2>
		<h2 class="ta2">对齐方式：右对齐</h2>
		<h2 class="ta3">对齐方式：居中对齐</h2>
		<h2 class="ta4">对齐方式：两端对齐对齐</h2>
		
	<P class="p1">/* 单词之间的距离，只对英文生效 */</P>	
	<p calss="p2">•none
•underline
•overline
•line-through
•blink

不出所料，underline 会对元素加下划线，就像 HTML 中的 U 元素一样。overline 的作用恰好相反，会在文本的顶端画一个上划线。值 line-through 则在文本中间画一个贯穿线，等价于 HTML 中的 S 和 strike 元素。blink 会让文本闪烁，类似于 Netscape 支持的颇招非议的 blink 标记。
</p>



	<p class="p3">•none
•underline
•overline
•line-through
•blink

不出所料，underline 会对元素加下划线，就像 HTML 中的 U 元素一样。overline 的作用恰好相反，会在文本的顶端画一个上划线。值 line-through 则在文本中间画一个贯穿线，等价于 HTML 中的 S 和 strike 元素。blink 会让文本闪烁，类似于 Netscape 支持的颇招非议的 blink 标记。
</p>

<a href="列表.html" class="a1">这是一个超链接</a>
<a href="列表.html" class="a2">这是一个超链接</a>
<P class="p4"> 
      如果显式地用这样一个规则去掉链接的下划线，那么锚与正常文本之间在视觉上的唯一差别就是颜色（至少默认是这样的，
	  不过也不能完全保证其颜色肯定有区别）。
		
还可以在一个规则中结合多种装饰。如果希望所有超链接既有下划线，又有上划线，则规则如下：

</P>

</body>
</html>

选择器，id,类，

<title>选择器</title>
	<style>
		/* 标签选择器：直接使用标签名 
		把所有相同的标签统一设置样式 */
		li{
			color: brown;
		}
		/* 类选择器 class
		 需要在相应的标签中添加class属性在css中使用  .  来代表
		 */
		.cl{
			color: green;
		}
		.cy{
			color: beige;
		}
		/* id 选择器可以为标有特定id的html元素指定特定的样式
		id选择器以“#”来定义*/
		#cl{
			color: aqua;
		}
		</style>
	</head>
	<body>
		<ul>
			<li id="cl">姓名</li>
			<li class="cy">年级</li>
			<li>爱好</li>
			<li class="cl">备注</li>
			<li class="cl">兴趣</li>
			<li class="cl">籍贯</li>
		</ul>
		<ol>
			<li id="xm">姓名</li>
			<li>年级</li>
			<li>爱好</li>
			<li>备注</li>
			<li>兴趣</li>
			<li>籍贯</li>
		</ol>
		标签选择器<类选择器<id选择器>
	</body>
</html>

font 字体：

<title>字体</title>
	<style>
		p{
			font-family: "华文彩云";
			/* font-familr:"华文彩云" ,"华文琥珀"；*/
			font-size: 20px ;
		}
		.s1{
			/* font-style: italic; */
		 font-weight: bold;
		}
		.s2{
			font-variant: small-caps;
		}
		.s3{
			font-weight: 1000 ;
		}
		.p2{
			font:italic bold 30px "宋体";
		}
		</style>
	</head>
	<body>
		<p>
			<span class="s1">font-family</span>一般来说，可以为所有块级元素应用 text-indent，但无法将该属性应用于行内元素，图像之类的替换元素上也无法应用 text-indent 属性。不过，如果一个块级元素（比如段落）的首行中有一个图像，它会随该行的其余文本移动。

			 <span class="s2">font-family</span>提示：如果想把一个行内元素的第一行“缩进”，可以用左内边距或外边距创造这种效果。

			<span class="s3">font-family</span>使用负值
		</p>
		<p class=".p2">
			<span class="s1">font-family</span>一般来说，可以为所有块级元素应用 text-indent，但无法将该属性应用于行内元素，图像之类的替换元素上也无法应用 text-indent 属性。不过，如果一个块级元素（比如段落）的首行中有一个图像，它会随该行的其余文本移动。
	
			<span class="s2">font-family</span>提示：如果想把一个行内元素的第一行“缩进”，可以用左内边距或外边距创造这种效果。
	
			<span class="s3">font-family</span>使用负值
		</p>

css背景：

 background-color 属性为元素设置背景色。

background-color 属性设置元素的背景颜色。

transparent 默认值

可能的值




描述

color_name 规定颜色值为颜色名称的背景颜色（比如 red）。 
hex_number 规定颜色值为十六进制值的背景颜色（比如 #ff0000）。 
rgb_number 规定颜色值为 rgb 代码的背景颜色（比如 rgb(255,0,0)）。 
transparent 默认。背景颜色为透明。 
inherit 规定应该从父元素继承 background-color 属性的设置。

背景图像：

要把图像放入背景，需要使用 background-image 属性。background-image 属性的默认值是 none，表示背景上没有放置任何图像。

可能的值




描述

url('URL') 指向图像的路径。 
none 默认值。不显示背景图像。 
inherit 规定应该从父元素继承 background-image 属性的设置。

背景重复：

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

可能的值


值

描述

repeat 默认。背景图像将在垂直方向和水平方向重复。 
repeat-x 背景图像将在水平方向重复。 
repeat-y 背景图像将在垂直方向重复。 
no-repeat 背景图像将仅显示一次。 
inherit 规定应该从父元素继承 background-repeat 属性的设置。

链接：

<style>
			a{
				text-decoration: none;
			}
			a:link{
				color:aqua;
			}
			a:visited{
				color:gray;
			}
			a:hover{
				color: red;
				text-decoration: underline;
			}
			a:active{
				color: green;
			}
			.p1:hover{
				color:red;
			text-decoration: underline;
			}
			.p1:active{
				color:yellow;
			}
		</style>
	</head>
	<body>
		<a href="列表.html">超链接</a><br />
		<a href="列表.html">超链接</a><br >
		<p class="p1">能够设置链接样式的 CSS 属性有很多种（例如 color, font-family, background 等等）。

链接的特殊性在于能够根据它们所处的状态来设置它们的样式。

链接的四种状态：
</p>

边框：

<title>边框</title>
	<style>
		img{
			border: 1px solid red;
			/* 边框宽度*/
			border-color: aquamarine;
			/* 边框颜色 */
			border-width: 2px;
			/* 样式 dashede：虚线   solid：实线*/
			border-style:solid;
			border-left: 1px dashed yellowgreen;
			border-right-color: blue;
			border-top-style: dashed;
			border-bottom-width: 3px;
		}
	</style>

表格样式：

<title>表格样式</title>
		<style>
			table{
				height: 300px;
				width:600px;
			}
			table,td{
				border: 1px solid black;
			}
			table{
				/* 边框合并 */
				border-collapse: separate;
				/* 边框间距 ：如果要设置间距时，边框不能合并*/
				border-spacing: 10px 20px;
				/* 表格的标题：top/bottom */
				caption-side: top;
				/* 设置是否显示表格中的空单元格。 */
				empty-cells: show;
			}

betterIatethanne

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS小部分内容

CSS 指层叠样式表 (CascadingStyleSheets)样式定义如何显示HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率外部样式表通常存储在CSS 文件中多个样式定义可层叠为一一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。浏览器缺省设置外部样式表内部样式表（位于 <head> 标签内部）内联样式（在 HTML 元素内部）
复制链接

扫一扫