CSS-基础

最新推荐文章于 2024-03-12 10:33:36 发布

weixin_33852020

最新推荐文章于 2024-03-12 10:33:36 发布

阅读量50

点赞数

原文链接：https://my.oschina.net/zhaojunhui/blog/1836094

版权

2019独角兽企业重金招聘Python工程师标准>>>

简介

css是Cascading Style Sheets的简称，中文称为层叠样式表，用来控制网页数据的表现，可以使用网页的表现与数据内容分离

css引入方式

引入方式表

实现方式名称	示例
行内式	<div style="margin:auto;">你好</div>
嵌入式	<style>div{margin:auto;;}</style>
链接式	<link href="test1.css" rel="stylesheet">
导入式	<style>@import "test2.css"</style>

css选择器

选择器指明了{}中的作用对象，也就是样式作用域网页中的哪些元素

基本样式优先级

优先级	选择符	释义
1	!important	最高优先级声明，如同有此声明情况，后者生效
2	style=""	内联样式，权重最高
3	#id{}	id选择器，根据id名称定位作用域。id名称具有唯一性
4	.class{}	class选择器,根据class名称定位作用域，class名称可以重复使用
5	div{}	标签选择器，匹配使用所有该类型的标签元素
6	*	通用元素，匹配任意元素
7		继承属性，继承上层的元素属性

组合选择器

名称	释义	示例
多元素选择器	同时匹配两个标签，中间用逗号隔开	div,p {color:#000}
后代元素选择器	匹配父级元素的后代元素，用空格隔开	div p {color:#000}
子元素选择器	匹配所有父级元素的子元素标签，用>表示	div > p {color:#000}
毗邻元素选择器	匹配所有紧随选择的元素之后的同级元素标签	div + p {color:#000}

属性选择器

*注：表格 div 代表标签，可以是其它标签，name 代表自定义名称，val 代表自定义值

示例	释义
div[name]	匹配具有name属性的字段，不考虑值
div[name="val"]	完全匹配具有name属性的字段，且值为val
div[name~="val1 val2"]	非完全匹配具有name属性的字段，且具有多个空格分隔的值。标签隶属于多个元素
div[name^="val"]	非完全匹配属性值一指定值开头的每个元素
div[name$="val"]	非完全匹配属性值以指定值结尾的每个元素
div[name*="val"]	非完全匹配属性值中包含指定值的每个元素

伪类

标签	释义
:visited	已访问的链接
:hover	鼠标悬浮状态
:active	点击时状态
:before	被选元素前加内容
:after	被选元素后加内容

综合示例

test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <link href="test1.css" rel="stylesheet">															<!-- 链接式css样式 -->
    <style>
    																									/*导入式css样式*/
 		@import "test2.css";
 																										/*标签选择器*/
    	h1{																							
    		padding-top:5px; color: #6666CC; font-size: 24px;  text-align: center; 						/*嵌入式css样式*/
    	}
    	
    </style>
</head>

<body>
    <div style="margin:50px auto; background-color:#99CCFF; width: 350px; height: 210px;">				<!-- 行内式css样式 -->
        <h1>登录</h1>
        <div class="login">
        	<dl name="dl_test1">
        		<dt>用户名：</dt>
        		<dd>
        			<input type="text" name="user" placeholder="请输入纯英文字母" ></label>
        		</dd>
        	</dl>
	        <dl name="dl_test2">
        		<dt>密码：</dt>
        		<dd>
        			<input type="password" name="user" placeholder="6-18位字符" ></label>
        		</dd>
        	</dl>
        	<p id="submit_css">
        		<input type="submit" value="提交登录">
                <a href="http://www.zhaojunhui.cn" target="_blak">用户注册</a>
        	</p>
    	</div>
        
    </div>
</body>
</html>

test1.css

.login { margin:35px auto; width: 255px;}			/*class选择器*/
.login dl {margin: 2px auto;}						/*后代元素选择器*/	
.login dl > dt { width: 80px;float: left;}			/*子元素选择器*/
[name^="dl_test"]{background-color: #CCC}			/*非完全匹配属性选择器*/

test2.css

*{margin: 0px;}																				/*通用选择器*/
a{text-decoration:none;color:#000;background-color:#f1f1f1;border:1px solid #789ad1;}		/*标签选择器*/
h1:before{content: "示例"}																	/*伪类-被选元素前加内容*/
h1:after{content: "窗口"} 																	/*伪类-被选元素后加内容*/
#submit_css {width: 160px; height: 50px; margin:20px auto;}									/*ID选择器*/
#submit_css input a{cursor:pointer;margin: 15px 10px auto auto； }							/*多元素选择器*/
#submit_css a:visited{color:#FF9900;}														/*伪类-已访问的链接*/       
#submit_css input:hover{color:#FF0033;}														/*伪类-鼠标悬浮状态*/
#submit_css input:active{color:#FFFF00;}													/*伪类-鼠标点击时状态*/

转载于:https://my.oschina.net/zhaojunhui/blog/1836094