CSS样式

CSS

1 查找标签（选择器）

引入选择
嵌入式
链接式 css文件中写（重点使用）
导入式这种最后加载css 用户体验不好,而且引用的数量有限制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>

    <link rel="stylesheet" href="css_test.css"> <!--导入css文件-->
    <!--<style>-->
        <!--@import "css_test.css";-->
    <!--</style>-->

</head>
<body>
    <!--<p style="color: red;background-color: green">hello</p>-->
    <p>hello</p>

    <div>DIV</div>

</body>
</html>

选择器

注意：一个块级标签可以嵌套块、内联标签，内联不能嵌套块级标签

p不能嵌套任何块标签

组合选择器

后代
子代
毗邻
兄弟

子代选择器

2操作标签（属性选择）

E[att]          匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略。
                比如“[cheacked]”。以下同。）   p[title] { color:#f00; }
 
 
E[att=val]      匹配所有att属性等于“val”的E元素   div[class=”error”] { color:#f00; }
 
 
E[att~=val]     匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素
                td[class~=”name”] { color:#f00; }
 
E[attr^=val]    匹配属性值以指定值开头的每个元素                    
                div[class^="test"]{background:#ffff00;}
 
E[attr$=val]    匹配属性值以指定值结尾的每个元素    div[class$="test"]{background:#ffff00;}
 
E[attr*=val]    匹配属性值中包含指定值的每个元素    div[class*="test"]{background:#ffff00;}

[po="p1"] po是自己定义的属性

<style>
        # 这样就能共同查找了
        div[po="p2"]{
            color: red;
        }

    </style>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div</title>
    <style>

        /*div[po="p2"]{*/
            /*color: red;*/
        /*}*/
		/*通过class属性寻找
        .c1[po="p1"]{
            color: red;
        }

    </style>
</head>
<body>
    <div po="p1" class="c1">p1</div> <!--普通的属性-->
    <div po="p2" class="c1">p2</div> <!--普通的属性-->
    <div >p3</div>

</body>
</html>

优先级****

1 内联样式表的权值最高               style=""－－－－－－－－－－－－1000；

2 统计选择符中的ID属性个数。       #id －－－－－－－－－－－－－－100

3 统计选择符中的CLASS属性个数。 .class －－－－－－－－－－－－－10

4 统计选择符中的HTML标签名个数。 p －－－－－－－－－－－－－-－1

通过值进行计算，谁的和大，谁的优先级高

css文本属性：
颜色
字体大小
水平对齐方式：

css背景属性

display属性

display:none

页面布局

这么把div放到一行，div是块级标签，不在一行

内联标签是不能设置长宽的

解决方法：
使用inline-block

span 使用display:block变成块级标签会独占一行
inline 可以给块级标签设置成内联标签
inline-block 都可以设置