版权声明:本文为博主原创文章,转载须注明出处,否则追究法律责任。 https://blog.csdn.net/qq_24831889/article/details/74474722
CSS标准样式
属性 | CSS名称 | 说明 | |
颜色 | color | red;green; | |
文本属性 | background-color | 背景颜色 | |
font-size | 字体大小 | 30px | |
font-family | 字体 | 楷体 隶书 宋体 | |
text-align | 文本对齐 | left;center'right;justify;inherit | |
边框属性 | border-style | 边框样式 | solid实心; |
border-width | 边框宽度 | 4px | |
border-color | 边框颜色 | ||
定位属性 | position | relative;absolate | |
left | 距离左边距离 | 50px | |
top | 距离上边距离 | 50px | |
z-index | 显示优先级 | 数字越大优先级越高 |
样式实现方式
- 嵌入样式表(行样式表),只能操作某一个样式,比较灵活
<p style="color:yellow;background-color:skyblue;width:500px;text-align:justify;text-justify:contribute-all-lines">
- 嵌入式样式表,可以操作多个,
<style>
body{margin:1px;color:black;height:50px}
.edu{background-color:gold;height:50px}
.undergraduate{background-color:green;height:50px}
.work{background-color:gray;height:50px;position:absolute;left:50px;top:50px;z-index:3}
.father1{background-color:blue;height:100px}
.father2{background-color:purple;height:100px;position:relative;top:100px}
.position1{background-color:red;height:50px;position:relative;left:300px;top:50px}
.position2{background-color:red;height:50px;position:absolute;left:300px;top:50px;z-index:2}
</style>
- 引入式样式表,将样式放在文件中,需要时引用即可,比较方便。
<head>
<meta charste="utf-8">
<link href="CSS.css" rel="stylesheet" type="text/css" />
</head>
-
优先级:行内样式>嵌入样式>引用样式
样式选择器:
- HTML选择器:所有HTML标签都可以定义特有的样式,网页中所有的标签都会应用所定义的样式,如body,div,p,a,li,ul,ol,span,b,img
- class选择器:以.开头,名称可以自己定义,可以应用于多个名称相同的标签
- ID选择器:ID是网页唯一性的标识,不可以重复,以#开头,一个ID样式只能应用到一个标签,主要用于程序交互的过程
- 关联选择器:引用了div样式的div中的p标签会引用div p样式,
<head>
<style>
.div p{font-size:35px}
</style>
</head>
<body>
<p>这是p标签的内容</p>
<div class="div">
<p>这是p标签的内容</p>
</div>
</body>
- 组合选择器:使用,表示并列的多个标签都可以使用同一个样式
<head>
<style>
.l1,.l2{font-size:12px;text-decoration:none}
.l1 a{background-color:red}
.l2 a{background-color:yellow}
</style>
</head>
<body>
<div class="l1">
我是l1
<a href="">我是l1</a>
</div>
<div class="l1">
我是l2
<a href="">我是l2</a>
</div>
</body
- 伪元素选择器:对于同一元素的不同状态选择不同的样式
a{font-size:12px}
a:hover {font-size:14px;color:grey}
p:firstline{}
p:firstletter{}