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" ></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>

    推薦閱讀