笔记 | PHP 2012 | css的引入 | css 选择器

笔记 | PHP 2012 | css的引入 | css 选择器 | css 初始化

理解

在管理元素之前, 需要先找到它们
选择器就是 css 找到元素的方法

[复习]引入css或.css文件的方法

<html>
    <head>
        ...
        <style>                                                           /* 直接写在head中 */
            #container{
                width: 1002px;
            }
        </style>
        <link rel="stylesheet" href="./CSS/reset.css" type="text/css" />    /* link 引入 */
    </head 
    <body></body>
<html>

@import url("./ind.css")                                        /* 在.css文件中引入.css文件 */

类别

id 选择器
用元素的 id 来选中此元素, 每个 id 在页面上是唯一的
用法:
　　- 先给某元素起一个唯一的 id 名
　　- 在 css 里, 用 #id{} 来选中此元素, 并控制

<style type="text/css">
#header{
　　width:8px;
　　...
}
</style>
...
<div id="header">
　　...
</div>

※ 为什么默认一个 div 的 margin,padding 全为0,但是 div 和浏览器还有空隙?
　　因为浏览器会为页面部分元素(body,ul,li 等)的 margin,padding,border预设一些值,
　　且各个浏览器预设值不一定相同

类选择器
类选择器是利用元素的类名称, 来选中一组类名相同的元素

.CLASSNAME{
　　margin: 0 auto;
}

<style type="text/css">
　　.stu{
　　　　background: yellow;
　　}
</style>
...
<div class="stu">
　　...
</div>

通配选择器　　{ 选中页面上所有的元素,效率低,极少用

*{
    margin: 0;
    border: 0;
}

※ 雅虎工程师 css 初始化示例

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td { 
　　margin: 0; 
　　padding: 0;
}
body {
　　background: #fff;
　　color: #555;
　　font-size: 14px;
　　font-family: Verdana, Arial, Helvetica, sans-serif;
}
td,th,caption {
　　font-size: 14px;
}
h1, h2, h3, h4, h5, h6 {
　　font-weight: normal;
　　font-size: 100%;
}
address, caption, cite, code, dfn, em, strong, th, var {
　　font-style: normal;
　　font-weight: normal;
}
a {
　　color: #555;
　　text-decoration: none;
}
a:hover {
　　text-decoration: underline;
}
img {
　　border: none;
}
ol, ul, li {
　　list-style: none;
}
input, textarea, select, button {
　　font: 14px Verdana, Helvetica, Arial, sans-serif;
}
table {
　　border-collapse: collapse;
}
html {
　　overflow-y: scroll;
}
.clearfix: after {
　　content: ".";
　　display: block;
　　height: 0;
　　clear: both;
　　visibility: hidden;
}
.clearfix {
　　*zoom: 1;
}

标签选择器

body{
　　background: #FFF;
}
img{
　　width: 600px;　　
　　height: 400px;
}

群组选择器　　{ 确切来说, 不是一种选择器, 而是一种简化写法
同时选中多个元素, 中间逗号隔开

#foo, .stu{
　　　margin: 5px 0;
}

派生选择器(父子选择器)
选中 id 为 header 的元素下的 img 标签元素, 中间空格

#header img{
    width: 600px;
    height: 400px;
}

伪类选择器
【伪】----控制的不是某一类标签，而是标签的某种状态

a:link {                                        // 链接没有被点击过, 可不写
　　underline: none
}
a:visited { }                                // 链接被点击过
a:hover { }                                // 鼠标(悬)放在链接上
a:active { }                                // 鼠标点击的瞬间

顺序: L, V, H, A

2012_d1_①_003-2 007 012 015 023

最后编辑于：2020.12.13 14:40:22