CSS层叠样式表

最新推荐文章于 2024-01-09 20:49:39 发布

第二人生2

最新推荐文章于 2024-01-09 20:49:39 发布

阅读量231

点赞数

分类专栏： HTML

HTML 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章目录

CSS概述

.CSS ： Cascading Style Sheet 层叠样式表
.CSS 作用就是给HTML页面标签添加各种样式
.为什么用CSS？
- HTML的缺陷：
1. 不能够适应多种设备
2. 要求浏览器必须智能化足够庞大
3. 数据和显示没有分开
4. 功能不够强大
- CSS 优点：
  1.使数据和显示分开
  2.降低网络流量
  3.使整个网站视觉效果一致
  4.使开发效率提高了

CSS语法
p{color：red;}
选择器{属性名：属性值 ;}
选择器后一定是大括号.属性名后必须用冒号隔开.属性值后用分号
属性名和冒号之间最好不要有空格。

CSS和HTML结合的方式

CSS代码理论上位置是任意的，但通常写在style标签里
sytle属性方式(行内样式)：采用style属性,范围只针对此标签适用

<div style = "border:1px solid red ;">大家好</div>

style标签方式(内嵌样式) ：范围针对此页面

 <head>
<style type="text/css">
		  /*
			  CSS和HTML的结合方式:
				   1. 行级样式表: 采用style属性完成
				   2. 内部样式表: 采用style标签完成
				   3. 外部样式表: 采用外部css文件完成
		  */
		 p{
			font-weight:bold;
			font-style:italic;
		 }
	</style>
	 </head>
 <body>
	 <p>你好</p>
	  <p style = "color:red">你好</p>
 </body>

导入方式：采用import，必须写在<style>标签中，并且必须是第一句。前提是已经存在一个定义好的CSS文件。url括号后面必须要用分号结束。如果导入进来的样式与本页面定义的样式重复，以本页定义样式为准

 <style type="text/css">
	@import url(css_3.css);
	div { color:#FF0000;}
</style>

链接方式：通过head标签中<link>标签来实现，前提也是先要有一个已定好的CSS文件。可以通过多个link标签链接进来多个CSS文件。重复样式以最后链接进来的CSS样式为准

<link rel="stylesheet" type="text/css" href="css_3.css" />

外部样式表中不能写<link>标签,但是可以写import语句
样式优先级
由上到下，由外到内。优先级由低到高
- 代码规范
  - 选择器名称 { 属性名：属性值；属性名：属性值；…….}
  - 属性与属性之间用分号隔开
  - 属性与属性值直接按用冒号连接
  - 如果一个属性有多个值的话，那么多个值用空格隔开

选择器

就是指定CSS要作用的标签，那个标签的名称就是选择器。意为：选择哪个容器

基本选择器

标签选择器: 就是选择了页面上一类标签

 p{
				color:red ;
				border:1px dashed green;
			}

标签选择器针对的是页面上的一类标签.

类选择器：规定用圆点. 来定义

.one{border:1px solid red ; }

类选择器可以供多种标签使用.通过class属性访问

ID选择器: 规定用#来定义 : 正对特定的一个标签用,通过id访问

 #two{border:3px dashed green ;}

ID选择器是值供特定的标签(一个). ID是此标签在此页面上的唯一标识。

通用选择器：用*来定义

*{
					font-size:30px;
					margin-left:0px;
					margin-top:0px;
			}

综合例子

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
	<style type="text/css">
		 /*
			 选择器： 1. 基本选择器
							a. 标签选择器: 就是选择了页面上一类标签
							b. 类选择器： 规定用圆点. 来定义
							c. ID选择器:  规定用#来定义 : 正对特定的一个标签用
							d. 通用选择器： 用*来定义
		 */
		
		 *{
			padding:0px;
			margin:0px;
			color:yellow;
		 }
		 .one{
			 border:1px solid red ;
		 }

		 #two{
			border:3px dashed green ;
		 }
		
	</style>
 </head>
 
 <body>
     <div class = "one">hello</div>
	 <p class = "one">hello</p>
	 <h1 class = "one">你好</h1>

	 <h2 id = "two">你好</h2>
	
 </body>
</html>

扩展选择器

组合选择器:多个不同选择器采用逗号隔开,对多个不同选择器进行相同样式设置的时候应用此选择器

p,h1,h2,.one,#two{color:red ; }

关联选择器(后代选择器): 采用空格隔开，让相同标签中的下一级不同标签显示不同样式

h4 span i{color:red ; }

表示h4标签中的span标签中的i标签的样式，标签是可以嵌套的，
h4和span和i标签不一定是紧挨着的。
伪类选择器：在html中预先定义好的一些选择器。格式：标签名：伪元素
- 静态伪类：规定是用:来定义.只有两个.只能用于超链接.
  :link表示超链接点击之前的颜色
  :visited表示链接点击之后的颜色
- a:link{}定义的样式针对所有的写了href属性的超链接(不包括锚)
- a{}定义的样式针对所有的超链接(包括锚)

 a:link{color:red ;}
 a:visited{color:yellow;}

动态伪类 : 针对所有的标签都适用
:hover : 当鼠标移动到某个控件上方的时候
:onfocus : 是某个标签获得焦点的时候
:active : 点击某个标签没有放松鼠标时

 label:hover{color:#00ff00; }
	input:focus{
			background-color:#ff9999;
			border:1px solid red;
		}
	a:active{
			color:blue;
		}

<style type="text/css">
		/*
			  2.扩展选择器：
					a. 组合选择器: 用逗号隔开多个选择器
					b. 关联选择器(后代选择器) : 用空格隔开,
					c. 伪类选择器
							1)： 静态伪类： :link,:visited,只能用于超链接
							2):  动态伪类： 适用于各种标签
											:onfocus 控件获得焦点
											:active  点击控件的时候
											:hover   当鼠标移动到某个控件上方的时候
							a{}与a:link{}:
							区别：a{}包括了锚点 a:link{}不包括锚点
		*/
		div,p,h1,.one,#two{
			border:5px double blue ;
		}
		
		h3 i   {
			color:red ;
		}

		a:link{
			color:red ;
		}
		a:visited{
			color:yellow;
		}

		input:focus{
			border:1px solid red ;
			color:green ;
			background-color:#ffcc99;
		}

		p:active{
			color:blue;
		}

		label:hover{
			cursor:hand;
		}

		table{
			width:300px;
			height:300px;
			border:1px solid red ;
			border-collapse:collapse;
		}

		table td{
			border:1px solid red ;
		}

		table tr:hover{
			background-color:#ffcc66;
		}
  </style>
 </head>
 <body>
     <div>你好</div>
	 <p>电影</p>
	 <h1>票房</h1>

	 <h4 class = "one">A</h4>
	 <h3>HELLO<b>AB<i>CD</i>EF</b>GH</h3><br>
	 <i>HAHAHA</i>
	 <a href = "" name = "">HAHA</a>
	 <input type="text" name="">
	 <label>hello，word</label>

样式表的冲突

CSS各种选择器的冲突

ID选择器 > 类选择器 > 标签选择器
行级样式表 > 内嵌样式表 > 外部样式表
外部样式表的ID选择器 > 内嵌样式表的标签选择器

原则：就近原则

	<style type="text/css">
			/*
				 1.行级 > 内部 > 外部
				 2.id > 类选择器 > 标签选择器
				    外部样式表中俄id选择器 > 内部样式表的标签选择器

					原则： 就近原则

			*/
		div{
			 color:blue ;
		}

		.two{
			border:3px dotted green ;
			color:red ;
		}
		.one{
			color:yellow ;
		}

		

		#d{
			color:green ;
		}

		p{
			color:red ;
		}
	</style>
 <body>
       <div class = "one" id = "d">ABC</div>

	   <P id = "p" style = "color:blue;">ABC</p>

	   <h1>ABCD</h1>

	   <h2 class = "two one" >ABCD</h2>
 </body>

样式表属性

CSS中尺度单位的介绍
CSS的单位:
a. 绝对单位 1in=2.54cm=25.4mm=72pt=6pc , pt是点或者磅，pc是派卡
b. 相对单位：px, em(印刷单位相当于12个点), %(相对周围的文字) px相对于屏幕分辨率
字体设置

   p{
				font-size:50px;    /*字体大小*/
				font-style:italic ;  /*斜体*/
				font-weight:bold;  /*粗体*/
				font-family:幼圆;  /*字体类型*/
				font-variant:small-caps;  /*小写变大写*/
				
			}

文本设置

  p{
		letter-spacing:0.5cm ; /*字母间距*/
		word-spacing:1cm;   /*单词间距*/
		text-align:center;   /*在所包含容器的中间*/
		text-decoration:overline; /*字体修饰 underline下划线 line-through中划线 overline上划线*/
		text-transform:lowercase;  /*单词字体大小写*/
		color:red ;
			}

背景设置

body{
					background-color:#ff99ff ;  /*背景颜色*/
					background-image:url(images/202.jpg) ; /*背景图片*/
					/*no-repeat不要平铺，repeat-x,横向平铺，repeat-y 纵向平铺*/
					background-repeat: no-repeat;  
					background-position:center right; /*背景位置*/
					 /*背景的移动 ,fixed跟着滚动条一起移动，scroll 不动*/
					background-attachment: scroll ;          
				}

列表设置

ul li{
				list-style:none;    /*列表前样式*/
				list-style-image:url(images/2.gif) ;  /*列表项前图片*/
				margin-left:80px;  
			 }

盒子模型(border margin padding)

<style type="text/css">
		div{
			width:100px;
			height:100px;
			border:1px solid red ;/*边的粗细*/
			padding:20px; /*内容到边的距离*/
			margin:30px;/*控件到控件的距离*/
		}


	</style>

定位设置(position,float,clear,z-index，overflow)
- z-index:值任意，值越大离我们越近，定义显示的远近距离
- float : 浮动
- overflow: 定义超出范围怎么办，如文本超出文本框显示范围

<style type="text/css">
			/*
				position:  a. 绝对定位：原点在父容器的左上角
						   b. 相对定位：相对于自己原来的位置(左上角为原点)

						   顺序流：所有的标签初始排列顺序就称为顺序流。
						       两种情况控件脱离了顺序流： 
									1. 当我们把控件的位置设定为绝对定位
									2. 当我们设置控件的float属性的时候。
									3. float : 浮动
			*/
			*{
				padding:0px;
				margin:0px;
			}
		div{
			position:absolute; /*绝对位置*/
			left:20px;
			top:20px;
			width:200px;
			height:200px;
			border:1px solid red ;
		}

		p{
			position:absolute;
			left:20px;
			top:20px;
		}*/
		
		body{
			padding:50px;
		}

		#d{
			position:absolute;
			width:200px;
			height:200px;
			border:1px solid red ;
		}

		#d1{
			position:relative;/*相对位置*/
			left:50px; /*横坐标*/
			top:-50px; /*纵坐标*/
			width:200px;
			height:200px;
			border:1px solid red ;
			z-index:5;
		}
		#d2{
			width:100px;
			height:100px;
			background-color:#66ff00;
			overflow: auto;     /*盒子中的内容超出类范围*/
		}
	</style>
 <body>
	  <div id = "d">
		  <p>ABCD</p>
	  </div>
	  <div id = "d1">A</div>
 </body>

鼠标样式设置(cursor):知道特定位置显示手型

<style type="text/css">
		 p:hover{
			cursor:pointer;
		 }
	</style>
	 <body>
      <p>hello</p>
 </body>

滤镜

它对图片的颜色进行一定的处理，以达到不同的效果。如颜色渐变效果，底片曝光效果和透明色效果等

<img src="xxx.jpg" style="filter:#>
 #=invert()
   shadow(color=red)
   alpha(style='3')
   blur(strength:'200')
   chroma(color:#000000)
   fliph()
   ........