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面试题大全,面试题总结全网最全,收藏一篇足够面试

2022年Unity 面试题 |五萬字 二佰道| Unity面试题大全,面试题总结全网最全,收藏一篇足够面试

一Lamdba表达式一篇足够

VSCode自定义代码片段——CSS选择器

VSCode自定义代码片段——CSS动画

VSCode自定义代码片段7——CSS动画