Css简述——一篇足够
Posted xufengfan
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Css简述——一篇足够相关的知识，希望对你有一定的参考价值。
1.css的引入方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p {color: red} </style> <link rel="stylesheet" href="mycss.css"> </head> <body> <p style="color: deeppink">我是一个p标签</p> </body> </html>
三种设置的优先级：标签内设置>文件头部style>外部文件
2.基本选择器
<style> /*标签选择器 所有span标签的颜色都是红色*/ span { color: red; } /*id选择器，id为s1的元素会被影响*/ #s1 { font-size: 24px; } /*类选择器，class为c1的元素会被影响*/ .c1 { color: orange; } /*通用选择器，*号通配符不解释*/ * { color: blue; } </style>
3.组合选择器
<style> /*后代选择器 div里面所有的span标签都变成蓝色 子子孙孙，包括div的div的span,无限迭代都要找到所有的span然后去征服他们*/ div span{ color: blue; } /*儿子选择器，只能打到儿子，不能动孙子辈以后的*/ div>span { color: red; } /*毗邻选择器 对下不对上，对div下边的同等级的span作用，也就是同一个父亲，与div相邻的那个span*/ div+span { color: blue; } /*弟弟选择器 对下不对上,注意，与上边不同的是，此时div下边的所有span都受影响，不止一个，所以这个不叫毗邻*/ div~span { color: deeppink; } </style>
4.属性选择器
<style> /*只要有xxx属性名的标签都找到，就是标签中除了class/name等，还有你自定义的属性名，xxx=“”,这种形式的属性*/ [xxx] { color: red; } /*只要标签有属性名为xxx并且值为1*/ [xxx=‘1‘] { color: blue; } /*规定p标签内部必须有属性名为xxx并且值为2的标签，例如：‘<p xxx="2">带有属性的标签且值为2</p>’*/ p[xxx=‘2‘] { color: green; } </style>
5.分组与嵌套
<style> div { color: red; } p { color: red; } span { color: red; } /*将以上三个可以简化为如下，因为样式一致，这就是分组*/ div,p,span { color: blue; } /*嵌套:不同的选择器可以共用一个样式 后代选择器与标签组合使用，此时注意断句，是div下的p,和span。p和span可没有括号包在一起，逗号就是为了分隔他们两个的,p是属于div的 */ div p,span { color: red; } </style>
6.伪类选择器
<style>
/*四种情况下--没有访问过的；鼠标悬浮；点击；访问过的。focus为鼠标选中输入框时，待输入状态*/ a:link { color: red; } a:hover { color: yellow; } a:active { color: black; } a:visited { color: green; } input:focus { background-color: red; } </style>
7.选择器的优先级
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #p1 { color: green; } .c1 { color: aqua; } p { color: red; } /*id选择器大于类选择器大于元素选择器*/ </style> <link rel="stylesheet" href="mycss.css"> </head> <body> <p id="p1" class="c1" style="color: blue">p</p> <!--行内样式设置优先级最大，超过style标签中的设置影响--> </body> </html>
8.样式修改
<style> div { width: 400px; height: 100px; } p { font-family: "Sitka Banner", "Arial", sans-serif }/*设置字体*/ p { font-size: 16px; font-weight: lighter; }/*设置字体大小，字体粗细*/ </style>
9.文版颜色
<style> p { color: red; color: rgb(0,0,255); color: #FF6700; color: rgba(0,0,255,0.8); }/*设置字体颜色；可以英文单词，rgb，16进制，支持rgba透明度*/ </style>
10.文本属性
<style> p { text-align: right; text-decoration: underline; text-decoration: overline; text-decoration: line-through; text-indent: 48px; }/*文字居中；下划线；上划线；中间线；首行缩进*/ a { text-decoration: none; }/*链接的下划线设置*/ </style>
11.背景属性
<style> div { width: 400px; height: 400px; background-color: green; background-image: url("1.png"); background-repeat: no-repeat; background-position: center; background: no-repeat center url("1.png") blue ; }/*宽度；长度；背景颜色；图片;图片是否重复；剧中；可以写在一起，无所谓顺序*/ </style>
12.背景图片相关设置
<style> .box { height: 400px; background: url("http://gss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D450%2C600/sign=e9952f4a6f09c93d07a706f3aa0dd4ea/4a36acaf2edda3cc5c5bdd6409e93901213f9232.jpg"); background-attachment: fixed; }/*fixed固定图片位置*/ </style>
13.边框
<style> div { border-width: 3px; border-style: dashed; border-color: deeppink; border: 3px solid red; }/*宽度；线段样式；边框颜色；写在一起也可以，不论顺序*/ </style>
14.画?
<style> div { width: 400px; height: 400px; background-color: red; border: 3px solid black; border-radius: 50%; }/*radius设置边角的圆度*/ </style>
15.display属性
<style> div { display: none; } /*inline将块儿级标签变成行内标签*/ div { display: inline; } span { display: block; } /*将选择的标签既具有行内标签特点又有块儿级标签的特点*/ span { display: inline-block; height: 400px; width: 400px; background-color: red; border: 3px solid black; } </style>
以上是关于Css简述——一篇足够的主要内容，如果未能解决你的问题，请参考以下文章
2022年Unity 面试题 |五萬字 二佰道| Unity面试题大全，面试题总结全网最全，收藏一篇足够面试