CSS的选择器、常用属性、盒子模型和定位

时间:2024-07-12 17:30:02

CSS

选择器

CSS选择器:选择页面(文档)中对应的标签,并设置样式

通配符选择器
//*:通配符选择器,选择页面中所有的标签
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                color: red;
            }
        </style>
    </head>
    <body>
        <h1>一级标签</h1>
        <h2>二级标签</h2>       
        <p>用良心做教育</p>
        <p>做真实的自己</p>   
        <span>匠心育人</span>
        <span>初心至善</span>
    </body>
</html>
基本选择器

基本选择器分为标签选择器、类(class)选择器、ID选择器

标签选择器
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style type="text/css">
        p{
            color: #FF0000;
        }
    </style>
    <body>
        <h1>一级标签</h1>
        <p>用良心做教育</p>
        <span>匠心育人</span>
    </body>
</html>
类(class)选择器

以 . 开头

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .myclass{
                color: #FF0000;
            }
        </style>
    </head>
    <body>
        <h1 class="myclass">一级标签</h1>
        <h2>二级标签</h2>
    </body>
</html>
ID选择器

以#开头,id唯一

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style type="text/css">
        #myid{
            color: #FF0000;
        }
    </style>
    <body>
        <h1 id="myid">一级标签</h1>
        <h2>二级标签</h2>
    </body>
</html>
​
基本选择器的优先级

ID选择器 > Class选择器 > 标签选择器

群组选择器
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style type="text/css">
            h1,h3,h5,p{color: red;}
        </style>
    <body>
        <h1>一级标签</h1>
        <h2>二级标签</h2>
        <h3>三级标签</h3>
        <h4>四级标签</h4>
        <h5>五级标签</h5>
        <h6>六级标签</h6>
        <p>用良心做教育</p>
        <p>做真实的自己</p>
    </body>
</html>
派生选择器

也被称为上下文关系选择器

分为后代选择器、子代选择器、相邻兄弟选择器

后代选择器

注意使用空格符号

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style type="text/css">
            ul a{
                color: red;
            }
        </style>
    <body>
        <ul>
            <li>
                <a href="#">超链接1</a>
            </li>
            <li>
                <a href="#">超链接2</a>
            </li>
            <li>
                <a href="#">超链接3</a>
            </li>
        </ul>
        
        <ul>
            <li>
                <a href="#">超链接4</a>
            </li>
            <li>
                <a href="#">超链接5</a>
            </li>
            <li>
                <a href="#">超链接6</a>
            </li>
        </ul>
        
        <a href="#">超链接7</a>
        <a href="#">超链接8</a>
        <a href="#">超链接9</a>
    </body>
</html>
​
子代选择器

注意:使用>符号

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style type="text/css">
            li>a{
                color: red;
            }
        </style>
    <body>
        <ul>
            <li>
                <a href="#">超链接1</a>
            </li>
            <li>
                <a href="#">超链接2</a>
            </li>
            <li>
                <a href="#">超链接3</a>
            </li>
        </ul>
        
        <ul>
            <li>
                <a href="#">超链接4</a>
            </li>
            <li>
                <a href="#">超链接5</a>
            </li>
            <li>
                <a href="#">超链接6</a>
            </li>
        </ul>
        
        <a href="#">超链接7</a>
        <a href="#">超链接8</a>
        <a href="#">超链接9</a>
    </body>
</html>
​
相邻兄弟选择器

注意使用+符号

样式作用在后者

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            a+a{
                color: red;
            }
        </style>
    </head>
    <body>
        
        <ul>
            <li>
                <a href="#">超链接1</a>
            </li>
            <li>
                <a href="#">超链接2</a>
            </li>
            <li>
                <a href="#">超链接3</a>
            </li>
        </ul>
        
        <ul>
            <li>
                <a href="#">超链接4</a>
            </li>
            <li>
                <a href="#">超链接5</a>
            </li>
            <li>
                <a href="#">超链接6</a>
            </li>
        </ul>
        
        <a href="#">超链接7</a>
        <a href="#">超链接8</a>
        <a href="#">超链接9</a>
    </body>
</html>
属性选择器
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*
			 * 属性选择器
			 * 
			 * 单个属性的属性选择器:
			 * 	input[placeholder]{color: red;}
			 * 
			 * 单个属性+值的属性选择器:
			 * 	input[type="text"]{color: red;}
			 * 
			 * 多个属性的属性选择器:
			 * 	input[name][placeholder]{color: red;}
			 * 
			 * 多个属性+值的属性选择器:
			 * 	input[type="text"][placeholder]{color: red;}
			 * 	input[type="text"][placeholder="请输入账号..."]{color: red;}s
			 */

		</style>
	</head>
	<body>
		<form action="服务器地址" method="post">
			
			账号:<input type="text" name="username" placeholder="请输入账号..."/>
				<br />
			密码:<input type="password" name="password" placeholder="请输入密码..."/>
				<br />
			确认密码:<input type="password" name="repassword"/>
				<br />
			姓名:<input type="text" name="name"/>
				<br />
			昵称:<input type="text" name="nickName" placeholder="请输入昵称..."/>
				<br />
			性别:
				<input type="radio" name="sex" value="man" checked="checked"/>男
				<input type="radio" name="sex" value="woman"/>女
				<br />
			爱好:
				<input type="checkbox" name="hobbies" value="football" checked="checked"/>足球
				<input type="checkbox" name="hobbies" value="basketball" checked="checked"/>篮球
				<input type="checkbox" name="hobbies" value="shop"/>购物
				<br />
			国籍:
				<select name="nationality">
					<option value="001">韩国</option>
					<option value="002">美国</option>
					<option value="003" selected="selected">中国</option>
					<option value="004">日本</option>
				</select>
				<br />
			
			<input type="submit" value="注册" />
		</form>
	</body>
</html>
锚伪类

设置超链接各个状态的样式(未访问状态、已访问状态、鼠标悬停在超链接状态、鼠标按下状态)

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			a:link {color: #FFCCFF}		/* 未访问的链接 */
			a:visited {color: #FF0000}	/* 已访问的链接 */
			a:hover {color: #66FF66}	/* 鼠标移动到链接上 */
			a:active {color: #33FFFF}	/* 选定的链接 */
		</style>
	</head>
	<body>
		
		<a href="http://www.163.com">跳转页面</a>
		
	</body>
</html>

常用属性

样式的优先级
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--
			样式的优先级别:
				行内样式 > 内/外部样式
			
			注意:内外部样式要看加载顺序
        -->
		
		<!--外部样式表-->
		<link rel="stylesheet" type="text/css" href="../../css/new_file.css"/>
		
		<!--内部样式表-->
		<style type="text/css">
			h1{color: red;}
		</style>
	</head>
	<body>
		<!--行内样式表-->
		<h1 style="color: blue;">我好像在哪儿见过你</h1>
		
	</body>
</html>
常用的CSS属性

1.字体属性

属性名称

font-family(字体)

font-size(大小)

font-style(风格)

---- normal标准样式

---- italic斜体

---- oblique倾斜

---- inherit从父类继承的字体样式

font-weight(字体加粗)

----normal标准样式

----bold粗体

----bolder更粗

----lighter更细

2.文本属性

属性名称

letter-spacing(字母间隔)

text-decoration(划线修饰)

text-align(文本对齐方式)

text-indent(文本缩进)

line-height(行高)

3.背景

属性名称

background-color

background-image

background-repeat

4.边框

属性名称

border-bottom

solid(实线)

dashed(虚线)

double(双实线)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			p{
				font-family: "微软雅黑";/*设置字体*/
				font-size: 50px;/*设置字体大小*/
				font-style: italic;/*设置字体样式*/
				font-weight: bold;/*设置字体粗细*/
				
				letter-spacing: 10px;/*设置文本间隔*/
				text-decoration: underline;/*设置文本划线*/
				text-align: center;/*设置对齐方式*/
				background-color: red;/*设置背景颜色*/
				color: white;/*设置字体颜色*/
				
				border: orange 5px solid;/*设置边框:颜色,粗细,实线*/
			}
			
			a:link {color: #000000}		/* 未访问的链接 */
			a:visited {color: #000000}	/* 已访问的链接 */
			a:hover {color: #3366FF}	/* 鼠标移动到链接上 */
			a:active {color: #3366FF}	/* 选定的链接 */
			
			a{
				text-decoration: none;/*去除划线*/
			}
			
			button{
				width: 500px;
				height: 500px;
				background-image: url(../../img/01.jpg);/*设置背景图片*/
				background-repeat:repeat-y;/*设置平铺方式*/
			}
			
			img{
				border-radius: 50%;/*倒圆角*/
			}
			
		</style>
	</head>
	<body>
		
		<p>我好像在哪儿见过你</p>
		
		<a href="#">地图</a>
		<br />
		
		<button>普通按钮</button>
		<br />
		
		<img src="../../img/01.jpg" width="100px" height="100px" />
	</body>
</html>

盒子模型

内边距
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		div{
			width: 200px;
			height: 200px;
			border: orange 1px solid;
			
			padding: 50px;/*设置上下左右内边距*/
			padding-top: 50px;/*设置上内边距*/
			padding-bottom: 50px;/*设置下内边距*/
			padding-left: 50px;/*设置左内边距*/
			padding-right: 50px;/*设置右内边距*/
			
			/*
			 * 注意1:内边距可能会把盒子撑变形
			 * 注意2:IE老版本不支持内边距
			 * 经验:能不用内边距就不用
			 */
		}
	</style>
	<body>
		<div>
			<span>我好像在哪儿见过你</span>
		</div>
	</body>
</html>
外边距
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		div{
			width: 200px;
			height: 200px;
			border: orange 1px solid;
			
			margin-top: 50px;/*设置上外边距*/
			margin-bottom: 50px;/*设置下外边距*/
			margin-left: 50px;/*设置左外边距*/
			margin-right: 50px;/*设置右外边距*/
			margin: 50px;/*设置上下左右外边距*/
		
		}
	</style>
	<body>
		<div>
			<span>我好像在哪儿见过你</span>
		</div>
	</body>
</html>
水平居中
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		div{
			width: 200px;
			height: 200px;
			border: orange 1px solid;
			
			margin: 0 auto;/*水平居中*/
		}
	</style>
	<body>
		<div>
			<span>我好像在哪儿见过你</span>
		</div>
	</body>
</html>

定位

相对定位

相对定位:保留原有位置,相对于原来的位置进行位移

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		#manager{
			border: orange 1px solid;
			margin-top: 50px;
		}
		#box01{
			width: 100px;
				height: 100px;
				border: red 1px solid;
		}
		#box02{
				width: 100px;
				height: 100px;
				border: green 1px solid;
				
				position: relative;/*相对定位:保留原有位置,相对于原来的位置进行位移*/
				top: 50px;
				left: 50px;
			}
			
			#box03{
				width: 100px;
				height: 100px;
				border: blue 1px solid;
			}
	</style>
	<body>
		<div id="manager">
			<div id="box01"></div>
			<div id="box02"></div>
			<div id="box03"></div>
		</div>
	</body>
</html>
绝对定位

绝对定位:不保留原有位置,向上找寻父级元素,判断父级元素中是否有position属性,如果有就按照父级元素进行位置,如果没有就继续向上找寻父级元素,直到body为止

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		#manager{
			border: orange 1px solid;
			margin-top: 50px;
		}
		#box01{
			width: 100px;
				height: 100px;
				border: red 1px solid;
		}
		#box02{
				width: 100px;
				height: 100px;
				border: green 1px solid;
				
				position: absolute;/*绝对定位:不保留原有位置,向上找寻父级元素,判断父级元素中是否有position属性,如果有就按照父级元素进行位置,如果没有就继续向上找寻父级元素,直到body为止*/
				top: 50px;
				left: 50px;
			}
			
			#box03{
				width: 100px;
				height: 100px;
				border: blue 1px solid;
			}
	</style>
	<body>
		<div id="manager">
			<div id="box01"></div>
			<div id="box02"></div>
			<div id="box03"></div>
		</div>
	</body>
</html>

固定定位
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		div{
			position: fixed;/*固定定位*/
			top: 80%;
			right: 20%;
		}
	</style>
	<body>
		
		<a name="top"></a><!--下锚点-->
		
		<div>
			<a href="#top">置顶</a>
		</div>
		
		<!--导航栏-->
		<a href="#new01">法治</a>
		<a href="#new02">国际</a>
		<a href="#new03">娱乐</a>
		
		<a name="new01"></a><!--下锚点-->
		<h1>法治新闻</h1>
		<h1>法治新闻</h1>
		<h1>法治新闻</h1>
		<h1>法治新闻</h1>
		<a name="new02"></a><!--下锚点-->
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<a name="new03"></a><!--下锚点-->
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>	
	</body>
</html>