CSS样式学习
CSS樣式學習
1.css概述
css（cascading style sheet）:是一種層疊樣式表語言
css的作用是修飾HTML頁面，設置html元素的樣式，讓HTML頁面更加好看。
css樣式能寫在html文件中，css的存在就是修飾HTML。
html中使用css樣式的方法
方式一：在style屬性中設置元素的css樣式，這種方式稱為內聯定義 格式： <標簽 style="樣式名:樣式值;樣式值:樣式名······"></標簽>方式二：樣式塊（在head標簽當中使用style塊） 格式： <head><style>選擇器{樣式名:樣式值；樣式名:樣式值；······ }選擇器{樣式名:樣式值；樣式名:樣式值；······ }</style> </head>第三種方式：鏈入外部外部樣式表文件（將樣式寫到一個獨立的xxx.css文件中） 鏈入語法格式：<link type="text/css" rel="stylesheet" href="文件路徑"/> 這種方式易于維護第一種方式：
<!doctype html> <html><head><meta charset="utf-8"/><title>html中用css樣式第一種方式</title></head><body><!--常見的樣式 width 寬度樣式height 高度樣式background-color 背景顏色顏色display 布局樣式（none隱藏，block顯示）border 邊框樣式border-color邊框顏色樣式border-width邊框寬度樣式border-style邊框種類樣式更多樣式可以看文檔--><div style="width:300px;height:300px; border:1px solid black"></div><div style="width:300px;height:300px;background-color:red ; border-width:1px; border-style:solid"></div></body> </html>第二種方式引入：
<!doctype html> <html><head><meta charset="utf-8"/><title>html中用css樣式第一種方式</title><style>/*css注釋*//*id選擇器，選擇某個id使用{}中的樣式,id唯一*/#use{color:red;font-size:10px;}/*標簽選擇器*/div{background-color:blue;}/*類選擇器*/.mystyle{background-color:red;}/*1)Css定義位置的優先級：（離元素越近，優先級越高） “元素上的style” > “文件頭上的style元素” >“外部樣式文件”特例：如果外部樣式放在內部樣式的后面，則外部樣式將覆蓋內部樣式。2）關于選擇器的優先級：(越精確，優先級越高) id選擇器指定的樣式 > 類選擇器指定的樣式 > 元素類型選擇器指定的樣式*/</style></head><body><!--常見的樣式 width 寬度樣式height 高度樣式background-color 背景顏色顏色display 布局樣式（none隱藏，block顯示）border 邊框樣式border-color邊框顏色樣式border-width邊框寬度樣式border-style邊框種類樣式position定位樣式left左定位top頭定位cursor鼠標點擊圖標更多樣式可以看文檔--><div id="use">這里是div塊,使用了id選擇器</div><div >這里是div塊,使用了id選擇器</div></body> </html>CSS樣式定義的優先級順序總結https://blog.csdn.net/zztfj/article/details/6731008
第三種方式
<!doctype html> <html><head><meta charset="utf-8"/><title>html中用css樣式第一種方式</title><link rel="stylesheet" type="text/css" href="文件路徑"/></head><body><div></div></body> </html>本文只介紹簡單的樣式，不做深入探索。
下一章：js基礎總結https://blog.csdn.net/qq_43203949/article/details/106404883.
總結
- 上一篇： 天猫健康发布《健康消费趋势洞察》：医疗器
- 下一篇： 【uniapp】CSS3 的 calc(