CSS

CSS基础介绍:

　　CSS(Cascading Style Sheet，层叠样式表)定义如何显示样式表

　　当浏览器读到一个样式表,就会按照这个样式表对文档进行渲染

CSS基础标签:

　　注释 :

/**/
CSS注释

　　行内样式:

　　行内式是在标记的style属性中设定的CSS样式,不推荐大规模使用:

<p style = "color : red"></p>
行内样式

　　内部样式:

　　嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
            color: aqua;
        }

    </style>
</head>

　　外部样式:

　　外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可。推荐使用此方式。

    <link rel="stylesheet" href="my.css">

　　CSS选择器:

　　　　元素选择器:

p { color:"red"; }

　　　　ID选择器:

#d1 { color:"red"; }

　　　　类选择器:

.c1 { color:"red"; }

　　　　通用选择器:

* { color:"red"; }

组合选择器:

　　后代选择器:

            /*div标签内部的所有span标签设置颜色*/
            div span { color:"green"; }

　　儿子选择器:

            /*div标签内部父级是div的span标签设置颜色*/
            div>span { color:"green"; }

　　毗邻选择器:

            /*选择所有在div标签下面的span标签设置颜色*/
            div+span { color:"green"; }

　　弟弟选择器:

            /*所有在div标签下面的span标签设置颜色*/
            div~span { color:"green"; }

 属性选择器:

/*选择有xxx属性的标签设置颜色*/
[xxx] {
    color:"red";    
}
/*选择有xxx属性的div标签设置颜色*/
div[xxx] {
    color:"red";
}
/*选择有xxx属性并且值为2的标签设置颜色*/
[xxx="2"] {
     color:"red";  
}
/*选择有xxx属性并且值为2的div标签设置颜色*/
div[xxx="2"] {
    color:"blue";
}

分组与嵌套:

/*div标签与p标签的颜色设置*/
        div,p {
            color: blue;
        }
/* 在一个类是c1的标签内 的p标签的颜色设置*/
        .c1 p {
            color: red;
        }

 伪类/伪元素选择器:

/*在a链接没有被点击过时设置的颜色*/
        a:link {
            color: aqua;
        }
/*鼠标悬浮在a链接上设置的颜色*/
        a:visited {
            color: red;
        }
/*在a链接被点击中设置的颜色*/
        a:hover {
            color: deeppink;
        }
/*在a链接被点击过后设置的颜色*/
        a:active {
            color: blue;
        }
/*点击进入输入框时背景颜色*/
        input:focus {
            outline: none;
            background-color: chartreuse;
        }
/*p标签文本第一个字设置颜色大小*/
        p:first-letter {
            font-size: 50px;
            color: blue;
        }
/*在p标签中的文本最前面加一个字设置颜色大小*/
        p:before {
            content: "d";
            font-size: 60px;
            color: chartreuse;
        }
/*在p标签中的文本最后加上内容设置颜色大小*/
        p:after {
            content: "???";
            font-size: 70px;
            color: aqua;
        }

 选择器优先级:

　　内联选择器>id选择器>类选择器>元素选择器

CSS属性相关:

　　font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。

　　font-size可以设置文本字体的大小:

/*将p标签中的文本字体设置为48像素*/
        p {
            font-size: 48px;
            }

　　如果设置成inherit表示继承父元素的字体大小值。

　　设置字体粗细:

/*设置p标签中文本字体加粗*/
p {
    font-weight: "bold" ;
}

 

 

 未完待续-------

 

 

 

　　

posted @ 2019-04-02 16:10  XSHUshu  阅读(111)  评论(0)  编辑  收藏  举报