CSS笔记（黑马程序员pink老师前端）选择器,字体,文本属性,Emmet语法,元素显示模式,CSS背景

选择器

选择器分为基础选择器和复合选择器两大类。
基础选择器
包括:标签选择器、类选择器、id选择器和通配符选择器。

 		/*标签选择器 */
        p {
            color: red;
        }

        /*类选择器 */
        .classname {
            color: yellow;
        }

        /*id选择器 */
        #idname {
            color: blue;
        }

        /*通配符选择器，选择页面所有的标签 */
        * {
            color: green;
        }

多类名

<div class="classname1 classname2 classname3"></div>

可以把一些标签元素共同的样式放到一个类里面。这些标签都可以调用这个公共的类,然后再调用自己独有的类。

复合选择器
基础选择器的组合.包括后代选择器,子元素选择器,并集选择器,伪类选择器(链接伪类,focus伪类).

 		/* 后代选择器，又称为包含选择器，可以选择父元素里面子元素。外层写在前，
 		内层写在后,元素之间用空格隔开,元素可以为任意基础选择器*/
        ol li .a1 {
            color: red;

        }
        
        /* 子元素选择器，只能选择某元素的最近一级子元素 */
        ul>li {

            text-align: center;
        }

		/* 并集选择器,可以选择多组标签同时为他们定义相同的样式。通常用于集体声明 
        任何形式的选择器都可以作为并集选择器的一部分。最后一个选择器后不要加逗号*/
        div,
        ol li .a1 {
            color: pink;
        }


		/* 伪类选择器,用于向某些选择器添加特殊的效果.*/
        /* 链接伪类,以下四个顺序(LVHA)不可变动.实际应用时,一般为单独为
        a标签指定样式,然后指定a:hover样式 */
        /* 选择所有未被访问的链接 */
        a:link {
            color: aqua;
            text-decoration: none;
        }

        /* 选择所有访问过的链接 */
        a:visited {
            color: darkblue;
        }

        /* 选择鼠标经过的链接 */
        a:hover {
            color: chocolate;
        }

        /* 选择鼠标点击且未松开的莲泽 */
        a:active {
            color: red;
        }


        /* focus伪类选择器 ，用于选择获得焦点的表单元素*/
        input:focus {
            background-color: pink;
        }

字体

属性名	说明	内容示例
font-family	字体系列	微软雅黑
font-size	字号大小	20px
font-weight	字体粗细	bold、bolder、lighter、400（无单位，400等同normal）
font-style	字体样式	normal、italic

font复合写法：font: font-style font-weight font-size/line-height font-family;
顺序不可改变，倾斜、加粗可省略，字号、字体不能省略。

font: italic 700 16px/20px ‘Microsoft yahei’;
注:16px/后的20px为行高,不加单位则代表当前字号倍数的高度

文本属性