浙江龙网

  1. 首页 > 生活百科 > >

day03-CSS( 三 )

生活百科day03-CSS


day03-CSS

文章插图
  • 方式2：在head标签中，使用style标签来定义需要的css样式
    例子
    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>在head标签中，使用style标签来定义需要的css样式</title><style type="text/css">div {width: 300px;height: 100px;background-color: beige;}span {border: 1px solid red;}</style></head><body><div>hello,北京</div><br/><div>hello,上海</div><br/><span>hello,span</span><br/></body></html>
    day03-CSS

    文章插图
  • 方式3：把css样式写成单独地css文件，在通过link标签引入（推荐使用）
    例子
    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>引入外部的css文件</title><!-- rel：代表relation ， 关联的意思 --><!-- type="text/css" 这个属性可以不写 --><!-- href表示要引入的css文件的位置 ， 可以是web的完整路径，也可以是相对路径--><!-- 推荐使用第三种方式--><link rel="stylesheet" type="text/css" href="https://www.huyubaike.com/biancheng/mycss.css"></head><body><div>hello,北京~</div><br/><div>hello,上海</div><br/><span>hello,span</span><br/></body></html>div {width: 200px;height: 100px;background-color: brown;}span {border: 1px dashed blue;}
    day03-CSS

    文章插图
    • 5.css选择器5.1css元素选择器
    1. 最常见的css选择器是元素选择器 。换句话说，文档的元素就是最基本的选择器
    2. css元素/标签选择器通常是某个html元素，比如p、h1、a等
    3. 元素选择器会修饰所有的对应的元素
    例子
    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>元素选择器</title><style type="text/css">h1 {color: red;}p {color: blue;}</style></head><body><h1>一只大猫咪</h1><p>一只小猫咪</p></body></html>
    day03-CSS

    文章插图
    5.2ID选择器元素选择器会修饰所有的对应的元素，但是假如希望某一个html元素使用特定的样式，而这个元素已经用了元素选择器修饰，这时候就可以使用id选择器来进行特殊的指定
    1. id选择器可以为标有特定id的html元素指定特定的样式
    2. id选择器以#来定义
    例子
    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>id选择器</title><!--1.使用id选择器，需要现在要修饰元素指定id属性，id值是自己指定的2.id是唯一的 ， 不能重复3.在<style>标签中指定id选择器时，前面需要有#id值--><style type="text/css">#css1 {color: #ff7d44;}#css2 {color: #8A2BE2FF;}</style></head><body><h1 id="css1">Hello ， 北京</h1><h1 id="css2">hello，上海</h1></body></html>
    day03-CSS

    文章插图
    5.3class选择器(类选择器)假如html文件中有三个div标签：
    如果使用元素选择器的话，所有的div元素都会受到影响；
    如果使用id选择器的话，可以唯一地修饰其中某一个div元素；
    但是如果想要修饰其中两个div ， 这时就不能用id选择器 ， 因为id选择器只能唯一地修饰一个div元素，也不能使用元素选择器，这时候就需要使用class类选择器 。
    class类选择器可以在许多元素（不一定是相同的元素）当中，挑选出其中的一部分来进行修饰 。
    唯一修饰使用id选择器，部分修饰使用类选择器，全部修饰使用元素选择器
    1. class类型选择器，可以通过class属性选择去使用这个样式
    2. 基本语法
      .class 属性值{属性:值;}
    例子
    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>类选择器</title><!--1.选择class选择器 ， 需要在被修饰的元素上，设置class属性，属性值(名称)自己定义2.class属性的值（名称）可以重复3.需要在style标签中指定类选择器的具体样式，开头需要使使用.类选择器名称--><style type="text/css">.css1 {color: pink;}.css2 {color: #25d2be;}</style></head><body><h1 class="css1">Hello，北京</h1><h1 class="css1">Hello，world</h1><h2 class="css2">ni hao</h2><h1 class="css2">hello，上海</h1></body></html>

    推荐阅读


    上一篇：GCC 指令详解及动态库、静态库的使用

    下一篇：更新显卡驱动的方法（更新显卡驱动需要卸载旧版本吗)