1. 首頁 > 生活百科 > >

day03-CSS

生活百科day03-CSS

CSS1.css介紹css指的是層疊樣式表（cascading style sheets）
官方文檔：https://www.w3school.com.cn/css/index.asp

  • 為什么需要css？
  1. 在沒有css之前，我們想要修改html元素的樣式需要為每個html元素單獨定義樣式屬性，費心費力 。所以css就出現了 。
  2. 使用css將html頁面的內容與樣式分離，提高web開發的工作效率（針對前段開發）
  • css快速入門-例子
    創建html文件完成如下網頁顯示：
    day03-CSS

    文章插圖
    day03-CSS

    文章插圖
    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>css快速入門</title><!-- 1.在head標簽類出現了<style type="text/css"> </style>2.表示要寫css內容3.div{}表示對div元素進行樣式的指定，div就是一個選擇器（元素/標簽選擇器）4.width:300px;...等表示對div樣式的具體指定，可以有多個5.如果有多個使用分號;分開即可，最后的屬性后面可以不用分號（建議寫上）6.當運行頁面時，div就會被div{}渲染，修飾7.在調試css時 ， 可以通過修改顏色或者大小來看樣式是否生效8.css的注解是/* */,快捷鍵是ctrl+/--><style type="text/css">div {width: 300px;height: 100px;background-color: beige;}</style></head><body><div>hello,北京</div><br/><div>hello,上海</div><br/><div>hello,天津</div><br/></body></html>
    day03-CSS

    文章插圖
2.css語法
  1. css語法可以分成兩部分：（1）選擇器（2）聲明
  2. 聲明由屬性和值組成 ， 多個聲明之間用分號分隔
    day03-CSS

    文章插圖
  3. 最后一條聲明可以不加分號（建議加上）
  4. 一般每行只描述一個屬性
  5. css注釋：/*注釋內容*/，類似java，快捷鍵是ctrl+/
3.css常用樣式3.1字體顏色和邊框
  • 字體顏色
    顏色可以寫顏色名，比如green；也可以寫rgb值，比如rgb(200,200,200)；十六進制表示值，比如#708090
    day03-CSS

    文章插圖
    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>顏色</title><style type="text/css">div {/*三種方式指定顏色：1.英文red;2.十六進制 ##ff7d44;3.三原色rgb(255,0,0);*//*color: red;*//*color: rgb(255,0,0);*/color: #ff7d44;}</style></head><body><div>一只小貓咪</div></body></html>
    day03-CSS

    文章插圖
  • 邊框：屬性border
    例子
    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>邊框</title><style type="text/css">div {width: 300px;height: 100px;border: 1px solid blue;/*屬性的值的順序是隨意的*/}</style></head><body><div>一只小貓咪</div></body></html>
    day03-CSS

    文章插圖
3.2寬度和高度
  • 寬度width和高度height的值，可以用像素：100px ， 也可以是百分比：50%
    /*width: 300px;*/width: 50%;/*百分比*/
使用百分比可以自適應瀏覽器的寬度和高度
3.3背景顏色和字體樣式