您的位置：首页 > Web前端 > CSS

HTML+CSS——初学笔记(三)

2017-03-09 10:47 260 查看
  CSS样式

           内联式css样式

    将css代码直接写在标签中 如：<p style ="color: blue; font-size:12px"(多个属性用分号隔开)>文字为蓝色</p>

           外部式CSS样式

    <link href = "base.css" rel="stylesheet" type="text/css"/>(放在<head>标签中)

           1,base.css :单独的外部文件

           2.rel,type 都属于固定写法，不可修改

           3,<link>标签一般在<head>标签中

     注：三种方法的优先级，遵从就近原则。

一，

             选择器

     在{}之前的部分为选择器，指明{}中样式作用的对象

           标签选择器

     作用于<html>,<body>,<p>,<img>标签内的网页元素

          类选择器

   语法：.类选择器名称{ css样式代码}

          使用 1，将需要修饰的内容用合适的标签包裹  如：<span > 内容 </span>

                  2，添加类选择器  <span class = "类选择器名称">内容</span>

                  3，设置类选择器css样式 （类 前面需要加一个 英文圆点）

         ID选择器

    与类选择器相似，不同点：1，将原点 ‘. ’ 改成 '#

                                           2，包裹的标签中 使用 id = "id名称"替换掉 class = "类名称"

             类选择器与ID选择器的区别

  同：可以应用于任何元素

  不同：1，id选择器只能在文档中使用一次而 类选择器可以多次

                  <span class="setCss">内容</span>.....<span class = "setCss">内容</span>

             2，可以使用类选择器列表方法为一个原色设置多个样式。

                .setCss{

               color:blue;

        }

                .setColor{

        font-size:12px;

        }

              <span class = "setCss setColor">内容</span>

          子选择器 (即大于符号‘>’)

 语法：.food>li{border:1px solid red;}  

  该代码会使类名为food下的子元素li加入边框为1px 的红色边框

         后代（包含）选择器

.first li{color:red;}(空格而不是大于号)

注：后代选择器作用于 类first中所有li标签元素，而自带选择器作用第一代（最外层）

        通用选择器

 * {color : red;}    使用‘*’号指定，作用于html中所有标签元素

二，选择符

       伪选择符

a : hover{color:red;}  给a标签鼠标滑过的状态设置字体颜色为红色 （a:hover最常用，兼容性好）

      分组选择符 （为html中多个元素设置同一个样式）

.first, .second span {color: red;} 为类first，second中span的内容设置文字颜色为红色
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航