码迷,mamicode.com
首页 > Web开发 > 详细

CSS【03】:CSS 基础选择器与三种引入方式

时间:2018-12-26 22:22:09      阅读:234      评论:0      收藏:0      [点我收藏+]

标签:建立   html 标签   ref   情况下   css   引入   type   方式   注意   

基础选择器

  • 选择器:css 选择 html 标签的一个工具,是将 css 与 html 建立起联系,那么 css 就可以控制 html 样式
  • 选择器其实就是给 html 标签起名字

标签选择器

  • 作用:根据指定的标签名称,在当前界面中找到所有该名称的标签,然后设置属性

  • 格式:

    标签名称 {
        属性: 值;
    }
  • 注意点:

    • 标签选择器选中的是当前界面中所有的标签,而不能单独选中某一个标签
    • 标签选择器无论标签藏得多深都能选中

id选择器

  • 作用:根据指定的 id 名称找到对应的标签,然后设置属性

  • 格式:

    #id名称 {
        属性: 值;
    }
  • 注意点:

    • 每个 HTML 标签都有一个属性叫做 id,也就是说每个标签都可以设置 id
    • 在同一个界面中 id 的名称是不可以重复的
    • 在编写 id 选择器时一定要在 id 名称前面加上 #
    • id 的名称是有一定的规范的
    • id 的名称只能由字母、数字、下划线组成(a-z 0-9 _)
    • id 名称不能以数字开头
    • id 名称不能是 HTML 标签的名称,不能是(a h1 img input ...)
    • 在企业开发中一般情况下如果仅仅是为了设置样式,我们不会使用id,因为在前端开发中 id 一般留给 js 使用的

类选择器

  • 作用:根据指定的类名称找到对应的标签,然后设置属性

  • 格式:

    .类名 {
        属性: 值;
    }
  • 注意点:

    • 每个 HTML 标签都有一个属性叫做 class,也就是说每个标签都可以设置类名
    • 在同一个界面中 class 的名称是可以重复的
    • 在编写 class 选择器时一定要在 class 名称前面加上.
    • 类名的命名规范和 id 名称的命名规范一样
    • 类名就是专门用来给 CSS 设置样式的
    • 在 HTML 中每个标签可以同时绑定多个类名

CSS三种引入方式

行间式

<div style="width: 100px; height: 100px">

</div>
<!-- 简单直接,针对性强 -->
  • 样式书写在标签的 style 全局属性中
  • 样式格式为key: value(单位)
  • ;隔开多个样式,最后的;可以省略

内联式

<head>
    <style>
        选择器 {
            width: 100px; 
            height: 100px;
        }
    </style>
</head>
<!-- 解耦合了,可读性强 -->
  • 样式书写在 head 标签内的 style 标签中
  • 样式格式为选择器 { 样式块 }
  • 样式块key: value(单位)

外联式

/* index.css文件 */
选择器 {
    width: 100px; 
    height: 100px;
}
/* 适合团队高效率开发, 耦合性低, 复用性强 */
<!-- index.html -->
<link rel='stylesheet' type='text/css' href='./index.css'>
  • 样式书写在外部 css 文件中,不需要写任何标签
  • 样式格式为选择器 { 样式块 }
  • 样式块key: value(单位)
  • ;隔开多个样式,最后的;可以省略

三种引入"优先级"分析

1. 没有优先级
2. 不同的属性样式协同操作,相同的样式采用覆盖机制,选择逻辑最下方的
3. 行间式一定是逻辑最下方的样式

CSS【03】:CSS 基础选择器与三种引入方式

标签:建立   html 标签   ref   情况下   css   引入   type   方式   注意   

原文地址:https://www.cnblogs.com/qiuxirufeng/p/10181160.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!