CSS入门之引用、选择器、属性(六分之三)

CSS 入门教程六分之三篇

没办法,我直播教小伙伴CSS入门,属性讲完,准备说定位的时候,他们就喊停,hold不住了。。。所以先写到六分之三,23333333

要点 解释
引用 如何使用定义的CSS样式方式
选择器 指明被定义样式的标签
属性 样式定义时具体定义的内容
定位 如何将标签放置到具体的位置(下篇)
盒模型 面试经典题(下篇)
显示 如何显示标签与标签布局(下篇)

引用

  1. 内联

    开标签或自闭合标签的style属性上写明对应的CSS定义内容,即为内联方式引用,如下:

    <div style=‘color: red;‘>普通内容</div>

    相关效果见:CodePen

  2. 内部标签

    定义在head标签下的style标签内容,即为内部标签方式引用,如下:

    <head>
        <style>
        #head-style {
            color: green;
        }
        </style>
    </head>
    <body>
        <div id=‘head-style‘>
            普通内容
        </div>
    </body>

    相关效果见:CodePen

  3. 外部链接

    定义在head标签下的link标签属性,即为外部链接方式引用,如下:

    <link rel=‘stylesheet‘ href=‘anypath/any.css‘>

    any.css内容如下:

    #out-link {
        color: blue;
    }

    对应适用标签如下:

    <div id=‘out-link‘>普通内容</div>

    相关效果见:CodePen

以上为三种引用方法,不包括JS

选择器

  1. id选择器

    唯一性,原则上通篇文件有且仅有一个id名称,不可重复

    任意标签的id属性,其属性值即为其唯一id,此id其他标签不可再用。

    如:

    <div id=‘first-id‘>xxx</div>

    CSS选择器表达式如下:

    #first-id {
    
    }

    表达式关键词:#

  2. class选择器

    任意标签的class属性,其属性值即为其class,此class与其他标签可共用,定义后所有同class标签一起生效。

    如:

    <div class=‘first-class‘>xxx</div>

    CSS选择器表达式如下:

    .first-class {
    
    }

    表达式关键词: .

  3. 标签选择器

    任意标签的标签名本身就是其选择器,由于标签的可复用性,所以使用标签选择器即为对所有同标签生效。

    CSS选择器表达式如下:

    div {
    
    }

    表达式关键词:无

  4. 伪类

    伪类不算是选择器,但是因为独特,这里拎出来说一下

    在选择器选中的基础上,对该标签的某种特性时段定义相关CSS属性,如hover(鼠标覆盖过程中),active(激活过程中)等等。

    CSS选择器表达式如下:

    div:hover {
        color: yellow;
    }

    相关效果见:CodePen

    表达式关键词::特性

属性

属性即CSS样式定制的具体样式,比如定制宽高,分别为width与height等。

相同的属性在不同的定位于显示中会有不同的表现,这里暂不表述过多,此处将属性大致分为四类,如下:

  1. 可继承属性

    普通标签可能存在子标签的情况,因此在给一个普通标签定义可继承属性时候,若子标签未定义覆盖父级定义的属性,则继承父级属性的值,如font标签。

    如存在如下代码关系:

    <div class=‘father‘>
        我是父级标签
        <div class=‘son‘>
            我是子级标签
            <div class=‘grandson‘>
                我是孙子标签
            </div>
        </div>
    </div>

    定义CSS如下:

    .father {
        color: purple;
    }

    相关效果见:CodePen

  2. 不可继承属性

    不可继承性则比较好理解,就是只对自己生效。

    如存在如下代码关系:

    <div class=‘father‘>
        我是父级标签
        <div class=‘son‘>
            我是子级标签
            <div class=‘grandson‘>
                我是孙子标签
            </div>
        </div>
    </div>

    定义CSS如下:

    .father1 {
        border: 1px solid red;
    }

    相关效果见:CodePen

  3. 与定位相关的属性

    定位下篇会说,这里只提一下主要相关属性:

    • position(定位方式)
    • top(距离上方距离)
    • right(距离右边距离)
    • bottom(距离下方距离)
    • left(距离左边距离)
  4. 与显示相关的属性

    显示下篇会说,这里只提一下主要相关属性:

    • display(显示方式)
    • width(宽度)
    • height(高度)
    • flex(弹性)
    • 其他flex相关

完整测试代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>CSS快速入门</title>
  <style>
    #id {
      color: red;
    }

    #testH2 {
      color: red;
    }

    .testClass1 {
      color: red;
    }

    /* 伪类 */
    .vir1 {
      color: green;
    }

    .vir1:hover {
      color: yellow;
    }

    /* h2 {
      color: red;
    } */
  </style>
  <!-- ../ 上级目录(../../../../)    ./当前目录    /根目录 -->
  <link rel="stylesheet" href="./index.css">
</head>

<body style=‘background: #eee‘>
  <h2 class="vir1">选择器(优先级排序)</h2>
    <ol>
      <li id=‘id‘>id(标记)</li>
      <li class=‘class‘>class(类)</li>
      <li class=‘vir‘>:特性(伪类)</li>
      <li>标签</li>
    </ol>

  <h2>属性</h2>
  <pre>
    选择器 {
      属性A: 值A;
      属性B: 值B;
    }
  </pre>

  <footer></footer>
</body>
</html>

感谢阅读,如果对你有任何帮助,深感荣幸。

如有问题,请留言。

如果觉得文章不错,还请关注一下,谢谢

原文地址:https://www.cnblogs.com/ZweiZhao/p/9297331.html

时间: 2024-10-10 08:13:12

CSS入门之引用、选择器、属性(六分之三)的相关文章

CSS入门(背景各种属性的详解、垂直居中和过渡效果的详解、渐变效果的简单讲解)

一.各种背景属性 1.background-image 属性为元素设置背景图像. 元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距. 默认地,背景图像位于元素的左上角,并在水平和垂直方向上重复. 提示:请设置一种可用的背景颜色,这样的话,假如背景图像不可用,页面也可获得良好的视觉效果. 属性值:url('URL') 指向图像的路径.none 默认值.不显示背景图像.inherit  规定应该从父元素继承 background-image 属性的设置. 2.background-s

HTML和CSS 入门系列(一):超链接、选择器、颜色、盒模式、DIV布局、图片

一.超链接 二.CSS选择器 CSS的全称叫做: Cascading Style Sheets 级联样式表的缩写. 2.1 类型选择器 2.2 派生选择器 2.3 伪类选择器 <style > a{ text-decoration: none; color: black; } /*注意它们是有先后顺序的,否则不起效果!!!*/ /*未访问的链接,和a{}相同并且同时存在时会覆盖a{}*/ a:link{ color:darkblue; } /*鼠标移动到超链接上时*/ a:hover{ tex

css基础 属性选择器 属性值以指定字符开头 / 结束

礼悟:    公恒学思合行悟,尊师重道存感恩.叶见寻根三返一,江河湖海同一体.          虚怀若谷良心主,愿行无悔给最苦.读书锻炼养身心,诚劝且行且珍惜.              ide:visual studio 2017             browser:Chrome                     os:win7 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu

css入门基础知识

一.CSS常用选择器 /*CSS注释*/ /*CSS修改页面中的所有标签必须借助选择器选中. 选择器中可以写多对CSS属性:每个属性名与属性值之间用:分隔,多对属性之间,必须用;分隔 选择器{ 属性1:属性值; 属性2:属性值;   必须用英文英文!!!!! } 页面中,所有的css代码,需要写到<style></style>标签中,style标签的type属性应该选择text/css,但是type属性可以省略 [css常用选择器] 1.标签选择器 1 写法:HTML标签名{ 作用

HTML中CSS入门基础

HTML.CSS 实用css有三种格式:内嵌:内联:外部: 分类:内联:写在标记的属性位置,优先级最高,重用性最差内嵌:写在页面的head中,优先级第二,重用性一般外部:写在一个以css结尾的文件中,通过引用来建立文件与html页面的关系,优先级最低,但是最灵活最好用,重用性最好. 经常用的就是内联和外部.外部的话需要引用. 选择器: id选择器:#id,优先级最高,只能选中一个元素class选择器:.class,优先级第二,能选中一堆元素标签选择器:标签名 div span ,优先级最低,能选

Css入门课程 Css基础

html css javascript三者关系 html是网页内容的载体 css是网页内容的表现,外观控制 javascript是网页逻辑处理和行为控制 css相对于html标签属性的优势 css简化了标签代码,利于下载提高效率 解决了网页内容与外观分离 利于维护,提供工作效率 css语法基础 css语法:选择符+申明,其中申明是指属性-值形式,注意css样式区分大小写 css使用方式 1)行内样式,又称内联样式 是通过标签的style属性书写在标签内部的样式 2)内部样式,又称嵌入样式 是在网

第十二章 CSS入门

第 12 章 CSS 入门学习要点:1.使用 CSS2.三种方式3.层叠和继承 本章主要探讨 HTML5 中 CSS(层叠样式表),它是用来对 HTML 文档外观的表现形式进行排版和格式化. 一.使用 CSSCSS 样式由一条或多条以分号隔开的样式声明组成.每条声明的样式包含着一个 CSS属性和属性值.<p style="color:red;font-size:50px;">这是一段文本</p>解释:style 是行内样式属性.color 是颜色属性,red 是

h5 . css入门 2.CSS基础

CSS基础 学习目标 1.CSS简介 2.CSS语法 3.样式的创建 4.两种引入外部样式表的区别 5.样式表的优先级和作用域 6.CSS选择器 7.选择器的权重 8.浮动属性的简单应用 9.HTML.CSS注释 一.CSS简介 英文全名:cascading style sheets(百度百科) === cascading style sheet层叠样式表,WEB标准中的表现标准语言,表现标准语言在网页中主要对网页信息的显示进行控制,简单说就是如何修饰网页信息的显示样式.目前推荐遵循的是W3C发

css入门知识点整理

css入门知识点整理 不要嘲笑我这个蒟蒻..例子来源:w3school css其实就分为两个东西,一个是选择器,另外一个是声明.声明定义了某个对象的属性的值,这都是html的内容.重点要关注的是选择器.顾名思义,选择器就是用来"选择"HTML中的元素的.通过定义选择器可以选出HTML文档中的某些元素,然后把它们的样式变成声明中的.css的格式长这样: selector {declaration1; declaration2; ... declarationN } 这里有一个最基本的cs