CSS——常见属性和基础选择器

来源：互联网发布：淘宝十大名店编辑：程序博客网时间：2024/06/02 03:10

CSS：cascading style sheet，层叠式样式表，即一个标签可以同时被多种选择器选择，标签选择器、id选择器、类选择器。这些选择器都可以选择上同一个标签，从而影响样式。

常见属性：

<head>    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">    <title>Document</title>    <style type="text/css">        .p{            color:red;            font-size: 30px;            text-decoration: underline;            font-weight:bold;            text-align: center;        }        .h1{            color:skyblue;            font-size:50px;            font-weight:bold;            background-color:pink;        }    </style></head><body>    <h1>这是一个标题</h1>    <p>这是一个段落</p></body>

css可以写在head里面，也可以写在单独的文件里面。
语法：< style type=”text/css”>< /style>
type表示“类型”，text就是“纯文本”。
sublime中输入< st+tab键可以自动生成style type。

CSS对换行不敏感，对空格也不敏感，但是语法一定要标准，冒号分号都不能省略。
语法：

    .选择器1｛            标签: 样式;            标签: 样式;            标签: 样式;     ｝    .选择器2｛            标签: 样式;            标签: 样式;            标签: 样式;    ｝

字体颜色：
color: red;
color属性的值可以是英语，如常见的red, yellow, blue, 也可以是lightyellow, skyblue等单词，也可以是rgb和十六进制。
sublime中快捷键是c+tab

字号大小：
font-size: 40px;
font是字体，size是尺寸，px是像素
sublime中快捷键是fos+tab

背景颜色：
background-color: blue;
sublime中快捷键是bgc+tab

加粗：
font-weight: bold;
font是字体，weight是重量，bold是加粗
sublime中快捷键是fwb+tab

不加粗：
font-weight: normal;
快捷键fwn+tab

斜体：
font-style: italic；
快捷键fsn+tab

下划线：
text-decoration: underline;
快捷键tdu+tab

无下划线：
text-decoration: none;
快捷键tdn+tab

基础选择器：
1.标签选择器，就是标签的名字。

……<title>追光者</title>    <style type="text/css">        span{            color: red;        }    </style></head><body>    <p>如果说你是遥远的星河/耀眼得让人想哭<span>我是追逐着你的眼眸</span>总在孤单时候眺望夜空</p></body></html>

所有的标签都可以是选择器，比如ul、li、label、dt、dl、input，无论这个标签藏的多深，都一定能够被选择：

    <style type="text/css">        p{            color: skyblue;        }    </style></head><body>    <ul>        <li>            <ul>                <li>                    <ul>                        <li>                            <ul>                                <li>                                    <p>我是五月天阿信</p>                                </li>                            </ul>                        </li>                    </ul>                </li>            </ul>        </li>    </ul></body>

标签选择器选择的是页面上所有这种类型的标签，经常描述共性，无法描述某一个元素的“个性”。比如希望页面上所有超链接都没有下划线：

a{    /*去掉下划线：*/    text-decoration: none; }

2.id选择器：选择符是”#”
任何html标签都可以有id属性，表示这个标签的名字。名字可以任取，但是①只能由字母、数字、下划线；②必须以字母开头；大小写严格区别，aa和AA是两个不同的id；③不能和标签同名，id不能叫做img或者body。④一个html页面，不能出现相同id，即使不是同一类型，比如页面上不能同时出现一个id为pp的p和一个id为pp的div。

        <style type="text/css">            #page1{                    color:red;            }        </style></head><body>    <p>后青春期的诗</p>    <p id="page1">第二人生</p>    <p>自传</p></body>

标签选择器+id选择器：

    <style type="text/css">        p{            width: 180px;            height: 20px;            background-color: pink;        }        #p2{            border: 2px dotted mediumpurple;            width: 200px;        }    </style></head><body>    <h3 id="p2">如果说你是遥远的星河</h3>    <h3>耀眼得让人想哭</h3>    <p>我是追逐着你的眼眸</p></body>

3.类选择器：符号：.
类就是class属性，class属性和id非常相似，任何标签都可以携带class属性。class属性可以重复，如页面上很多标签都有”teshu”这个类：

        <style type="text/css">        .teshu{            color:lightpink;        }        </style></head><body>    <h3 class="teshu">如果说你是遥远的星河</h3>    <h3>耀眼得让人想哭</h3>    <p class="teshu">我是追逐着你的眼眸</p>    <p>总在孤单时刻眺望夜空</p></body>

同一个标签，可能同时属于多个类，用空格隔开：
< h3 class=”teshu guanjian”>如果说你是遥远的星河< /h3>
此时的h3同时属于teshu类和guanjian类。
初学者很容易写成两个class：
< h3 class=”teshu” class=”zhongyao”>如果说你是遥远的星河< /h3>
总结：①class可以重复，即同一个页面上可能有多个标签同时属于某一个类；②同一个标签可以同时携带多个类。（类的使用能够决定一个人的CSS水平）

正确的CSS思路是“公共类”思路，类提供“公共服务”，比如大号字体，蓝色字体，下划线等类名，其相应的样式变化：

        <style type="text/css">        .yanse{            color:skyblue;        }        .xiahuaxian{            text-decoration:underline;        }        .ziti{            font-size:60px;        }        </style></head><body>    <h3 class="yanse xiahuaxian">如果说你是遥远的星河</h3>    <h3 class="yanse ziti">耀眼得让人想哭</h3>    <p class="ziti xiahuaxian">我是追逐着你的眼眸</p>    <p class="ziti">总在孤单时刻眺望夜空</p></body>

通过以上代码，我们可以总结：
①不要试图用一个类名把某个标签的所有样式写完。这个标签要多携带几个类，共同造成这个标签的样式；
②每个类要尽可能小，有“公共”的概念，能够让更多的标签使用。

id or class？
尽可能用class，极特殊情况可以用id。因为id是js用的，js要通过id属性得到标签，所以在CSS层面尽量不用id。另一方面，我们默认一个有id的元素会有动态效果。

阅读全文

0 0