博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

Web：样式，选择器

Posted on 2017-07-31 19:21  亡者归来19  阅读(113)  评论(0)    收藏  举报

样式：1：行内样式：

把样式表写在开始标签的内部
语法：style="属性：属性值；属性：属性值；"
应用：不建议大量使用，样式表复用性不强，代码混乱　　　　

2： 内部样式：把样式表写在head标签内部

<head>
    #box{
             **** ****
}
    .class{    ****
}
     p{    ****
}
</head>
<body>
<div id="box">

</div>
<body>
<div class="box1">

</div>
    <p>  </p>
</body>

 

问题：在head标签的样式表中，如何知道该修饰body里的哪一个标签？
回答：通过使用选择器来知道修饰哪一个标签
选择器：是样式表中获取body里标签的方式
标签选择器：通过标签名称来获取body里的标签
应用：将标签和CSS进行了分离
但是样式表只能页内复用
小网站可以采用此种方式，大网站不采用

3：外部样式：选择器

<head>
<link rel="stylesheet" href="css/style.css" />
　　--把样式表代码，单独写在.css的文件中
<link rel="stylesheet" href="css/style1.css" />
</head>

<body>
　　<div>
　　　　***
　　</div>
</body>

应用：复用性较强，推荐使用
一个页面可以引入多个样式表文件

A：选择器只有 行内样式和内部样式才用到： id选择器  class选择器   标题选择器

以上三种选择器的优先级别
　　　　1、id选择器>2、类选择器>3、标签选择器

 

4:伪列选择器

伪类选择器：
a:hover{
       ****
}
    鼠标悬停在a标签上时 会变样式