18910140161

Css

首页 >> 前端开发 >> Css

第13天半铸钢ˌ钢性铸铁(Cast Semi-Steel)样式

顺晟科技

2021-06-30 17:16:33

256

1. css 选择器

　　1.1 css三种引入方法

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8" />
        <title> css三种引入方法,和常见三种选择器 </title>
        
        <!--2.内嵌样式-->
        <style>
            p{font-size:30px}     /* 1.标签选择器  :  指的是哪一种标签*/
            .one{color: green;}   /* 2.类选择器    :  指的是哪一类标签*/
            #two{color:red}          /* 3.ID选择器    :  指的是哪一个标签*/
        </style>
        <!--3.外部链接引入-->
        <link href="./ceshi.css" type="text/css" rel="stylesheet" />
        
    </head>
    
    <body>    
        <p>今天深圳挺热,但是北京挺冷</p>
        <!--1.行内样式-->
        <p style="color:blue" >今天深圳挺热,但是北京挺冷</p>
        <p class="one" >今天深圳挺热,但是北京挺冷</p>
        <p id="two" >今天深圳挺热,但是北京挺冷</p>
        
        
    </body>

</html>

<!--
p div 块状   可以设置宽高 独占一行
span a  行内  不能独占一行, 不能设置宽高
img input 行内块状元素  不能独占一行, 可以设置宽高
-->

【ceshi.css】

body{background-color:yellow;}

　　1.2. 组合器

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<title> 组合选择器 </title>
		<style>
			h1,h2,h3,h4{color:blue;}
			
			.a1{font-size : 30px;color:yellow;}
			h3.a1{font-size:50px;color:red;}
			
			#a1{font-size : 40px;color:pink;}
			h3#a1{font-size:60px;color:green;}
			
		</style>

	</head>
	
	<body>	
	
		<!--
		class 类选择器 可以使用多次
		id    ID选择器 可以使用一次 (多次使用可以执行,但是不推荐这样使用;)
		-->
		<h1>字体更大的是h1</h1>
		<h2>其次是h2</h2>
		<h3 class="a1">其次是h3111</h3>
		<h3 id="a1">其次是h3222</h3>
		<h4 id="a1">其次是h4333</h4>
		<h5 >其次是h5444</h5>



	</body>

</html>

<!--
p div 块状   可以设置宽高 独占一行
span a  行内  不能独占一行, 不能设置宽高
img input 行内块状元素  不能独占一行, 可以设置宽高
-->

　　1.3. 选择器优先级

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<title> 选择器优先级 </title>
		<style>
			/* !important 刻意提升css的优先级 */
			font{color:pink!important;}
			.b1{color:yellow;}
			#b2{color:green;}
		</style>

	</head>
	
	<body>	
		<!-- !important <- 行内样式 <- ID选择器 <- 类选择器 <- 标签选择器 -->
		<font style="color:purple;"  class="b1" id="b2" >  选择器优先级 </font>


	</body>

</html>

　　1.4. 关系型选择器

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<title> 关系选择器 </title>
		<style>
			ul li{color:green;}  /* 包含选择器/后代 */
			ul>li{color:red;}    /* 父子选择器 */
			ol+li{color:pink;}   /* 相邻选择器 */
			ol~li{color:blue;}   /* 兄弟选择器*/
		</style>

	</head>
	
	<body>	
		<ul>
		
			<li>动漫频道</li>
			<li>乡村频道</li>
			<ol>
				<li>少儿频道</li>
				<li>成人频道</li>
				<li>探索频道</li>
			</ol>
			<li>宇宙频道</li>
			<li>科幻频道</li>
			<li>文化频道</li>		
		
		</ul>

	</body>

</html>

　　1.5 属性选择器

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<title> 属性选择器 </title>
		<style>
			/*泛指的元素优先级低  特指的元素优先级高*/
			input[name]{background-color:green;}			
			input[type=text]{background-color:yellow;}
			input[type=password]{background-color:red;}

		</style>

	</head>
	
	<body>	
		<form action="" method="">
			用户名: <input type="text" name="" />
			<br />
			昵称:  <input type="text" name="" />
			<br />
			密码:  <input type="password" name="" />
			<br />
			性别:  <input type="radio" name="sex" value="m" /> 男
				   <input type="radio" name="sex" value="w" /> 女
		</form>

	</body>

</html>

　　1.6 伪类选择器

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<title> 伪类选择器 </title>
		<style>
			/* 鼠标滑过时变色 */
			a:hover{color:green;}		

			/* 列表中个元素 */
			ul li:first-child{color:red}	
			
			/* 列表中最后一个元素 */
			ul li:last-child{color:yellowgreen;}
			
			/* 列表中具体那一个元素 */
			ul li:nth-child(1){color:pink;}
			
			/* even 代表偶数  , odd 代表奇数  , 使用n的计算关系制定找寻元素 例如:  2n   2n-1 */
			ul li:nth-child(even)
			{background-color:purple;}
			
			ul li:nth-child(2n)
			{background-color:green;}
			
			ul li:nth-child(odd)
			{background-color:yellow;}
			
			ul li:nth-child(2n-1)
			{background-color:blue;}
			
			/* 小练习 */
			/* 2.偶数行颜色为蓝色  */
			table tr:nth-child(even)
			{background-color:blue;color:white;}
						
			/* 3.第3 , 6 , 9   3被行颜色为黄色 */
			table tr:nth-child(3n)
			{background-color:yellow;}
			
			/* 4.鼠标滑过时,颜色变成红色*/
			table tr:hover
			{background-color:red;}
			
			/* 合并边框 */
			table
			{border-collapse:collapse}
			
			
			/* 颜色设置可以使用十六进制 */
			/*
				red    0 ~ 255   0 ~ ff
				green  0 ~ 255	 0 ~ ff	
				blue   0 ~ 255   0 ~ ff
				f -> 15 1111  ff -> 255 11111111
				纯红色: #ff0000  => 简写: #f00
				纯绿色: #00ff00  => 简写: #0f0
				纯蓝色: #0000ff  => 简写: #00f
				(两个值相同的情况下,可以缩写)
				
				十六进制: 0~9 a~f a => 10
				#a1b2c3
			*/

		</style>
		
	</head>
	
	<body>
		<a href="#"> 老男孩IT教育 之 Alex</a>
		<ul>
			<li>1111</li>
			<li>2222</li>
			<li>3333</li>
			<li>4444</li>
			<li>5555</li>
			<li>6666</li>
			<li>7777</li>
			<li>8888</li>
		</ul>

		<!--
		小练习:
			1.写一个table表格,设置一个背景色
			2.偶数行颜色为蓝色
			3.第3 , 6 , 9   3被行颜色为黄色
			4.鼠标滑过时,颜色变成红色
		-->
		<table border="1" width ="500px" height="300px;" align="center" style="background-color:#ff0000;">
			<tr>
				<td>ceshi111</td>
				<td>ceshi222</td>
				<td>ceshi333</td>
			</tr>


			<tr>
				<td>ceshi111</td>
				<td>ceshi222</td>
				<td>ceshi333</td>
			</tr>
			
			<tr>
				<td>ceshi111</td>
				<td>ceshi222</td>
				<td>ceshi333</td>
			</tr>
			
			<tr>
				<td>ceshi111</td>
				<td>ceshi222</td>
				<td>ceshi333</td>
			</tr>
			
			<tr>
				<td>ceshi111</td>
				<td>ceshi222</td>
				<td>ceshi333</td>
			</tr>
			
			<tr>
				<td>ceshi111</td>
				<td>ceshi222</td>
				<td>ceshi333</td>
			</tr>
			
			<tr>
				<td>ceshi111</td>
				<td>ceshi222</td>
				<td>ceshi333</td>
			</tr>
			
			<tr>
				<td>ceshi111</td>
				<td>ceshi222</td>
				<td>ceshi333</td>
			</tr>

			<tr>
				<td>ceshi111</td>
				<td>ceshi222</td>
				<td>ceshi333</td>
			</tr>
		</table>
		
	
		<div style="width:100px;height:100px;background:#abc">
			111
		</div>
		
	</body>

</html>

　　1.7 伪对象

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<title> 伪类选择器 </title>
		<style>
			/* 鼠标滑过时变色 */
			a:hover{color:green;}		

			/* 列表中个元素 */
			ul li:first-child{color:red}	
			
			/* 列表中最后一个元素 */
			ul li:last-child{color:yellowgreen;}
			
			/* 列表中具体那一个元素 */
			ul li:nth-child(1){color:pink;}
			
			/* even 代表偶数  , odd 代表奇数  , 使用n的计算关系制定找寻元素 例如:  2n   2n-1 */
			ul li:nth-child(even)
			{background-color:purple;}
			
			ul li:nth-child(2n)
			{background-color:green;}
			
			ul li:nth-child(odd)
			{background-color:yellow;}
			
			ul li:nth-child(2n-1)
			{background-color:blue;}
			
			/* 小练习 */
			/* 2.偶数行颜色为蓝色  */
			table tr:nth-child(even)
			{background-color:blue;color:white;}
						
			/* 3.第3 , 6 , 9   3被行颜色为黄色 */
			table tr:nth-child(3n)
			{background-color:yellow;}
			
			/* 4.鼠标滑过时,颜色变成红色*/
			table tr:hover
			{background-color:red;}
			
			/* 合并边框 */
			table
			{border-collapse:collapse}
			
			
			/* 颜色设置可以使用十六进制 */
			/*
				red    0 ~ 255   0 ~ ff
				green  0 ~ 255	 0 ~ ff	
				blue   0 ~ 255   0 ~ ff
				f -> 15 1111  ff -> 255 11111111
				纯红色: #ff0000  => 简写: #f00
				纯绿色: #00ff00  => 简写: #0f0
				纯蓝色: #0000ff  => 简写: #00f
				(两个值相同的情况下,可以缩写)
				
				十六进制: 0~9 a~f a => 10
				#a1b2c3
			*/

		</style>
		
	</head>
	
	<body>
		<a href="#"> 老男孩IT教育 之 Alex</a>
		<ul>
			<li>1111</li>
			<li>2222</li>
			<li>3333</li>
			<li>4444</li>
			<li>5555</li>
			<li>6666</li>
			<li>7777</li>
			<li>8888</li>
		</ul>

		<!--
		小练习:
			1.写一个table表格,设置一个背景色
			2.偶数行颜色为蓝色
			3.第3 , 6 , 9   3被行颜色为黄色
			4.鼠标滑过时,颜色变成红色
		-->
		<table border="1" width ="500px" height="300px;" align="center" style="background-color:#ff0000;">
			<tr>
				<td>ceshi111</td>
				<td>ceshi222</td>
				<td>ceshi333</td>
			</tr>


			<tr>
				<td>ceshi111</td>
				<td>ceshi222</td>
				<td>ceshi333</td>
			</tr>
			
			<tr>
				<td>ceshi111</td>
				<td>ceshi222</td>
				<td>ceshi333</td>
			</tr>
			
			<tr>
				<td>ceshi111</td>
				<td>ceshi222</td>
				<td>ceshi333</td>
			</tr>
			
			<tr>
				<td>ceshi111</td>
				<td>ceshi222</td>
				<td>ceshi333</td>
			</tr>
			
			<tr>
				<td>ceshi111</td>
				<td>ceshi222</td>
				<td>ceshi333</td>
			</tr>
			
			<tr>
				<td>ceshi111</td>
				<td>ceshi222</td>
				<td>ceshi333</td>
			</tr>
			
			<tr>
				<td>ceshi111</td>
				<td>ceshi222</td>
				<td>ceshi333</td>
			</tr>

			<tr>
				<td>ceshi111</td>
				<td>ceshi222</td>
				<td>ceshi333</td>
			</tr>
		</table>
		
	
		<div style="width:100px;height:100px;background:#abc">
			111
		</div>
		
	</body>

</html>

　　

上一篇：HTML CSS系列3360CSS选 下一篇：实现CSS和js硬件加速呈现自定义滚
相关文章
推荐阅读
随机推荐
我们已经准备好了，你呢？
获取网站建设报价
2024我们与您携手共赢，为您的企业形象保驾护航！