前端（二）之 CSS
生活随笔
收集整理的這篇文章主要介紹了
前端（二）之 CSS
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
前端之 CSS
前言
昨天學習了標記式語言，也就是無邏輯語言。了解了網(wǎng)頁的骨架是什么構(gòu)成的，了解了常用標簽，兩個指令以及轉(zhuǎn)義字符；其中標簽可以分為兩大類：
今天學習 CSS，被稱之為網(wǎng)頁的化妝師。
什么是 CSS
CSS 全稱為級聯(lián)樣式表（Cascading Style Sheet），主要負責頁面的風格設(shè)計，樣式、美觀。通常以.css 后綴結(jié)尾。
標記語言
和 html 一樣是非編程語言，不具備語言的程序邏輯。
css 為前端頁面的樣式，由選擇器、作用域與樣式塊組成。
選擇器：由標簽、類、id 單獨或組合出現(xiàn)；
作用域：一組大括號包含的區(qū)域；
樣式塊：滿足 css 連接語法的眾多樣式。
css 發(fā)展史代表版本
CSS 書寫語法
css 由三部分組成：選擇器、作用域與樣式塊。
選擇器 {樣式1: 值1;樣式2: 值2; }h3 {width: 100px;height: 100px;background-color: yellowgreen }CSS 的三種引入方式
第一種引入方式：行間式
特點：
第二種引入方式：內(nèi)聯(lián)式
特點：
第三種引入方式：外聯(lián)式
特點：
CSS 三種引入方式的優(yōu)先級
三種可以同時存在并協(xié)同完整布局，三種引入方式之間沒有優(yōu)先級之說，哪種引入方式在邏輯下方（后解釋的）誰就起作用（樣式覆蓋）。并且行間式一定是邏輯最下方的。
當三種引入方式同時存在且操作同一對象的同一屬性時，才會出現(xiàn)沖突，最終起作用的就是優(yōu)先級高的。
/*o4.css*/ div {height: 200px;color: brown; } <!DOCTYPE html> <html lang="zh"> <head><meta charset="UTF-8"><title>三種引入的優(yōu)先級</title><!-- 三種可以同時存在，協(xié)同完整布局 --><!-- 三種之間沒有優(yōu)先級之說 誰在邏輯下方（后解釋的）誰就起作用（樣式覆蓋） --><!-- 行間式一定是邏輯最下方的 --><!-- 內(nèi)聯(lián) --><style type="text/css">div {width: 200px;color: pink;/*height: 200px;*/}</style><!-- 外聯(lián) --><link rel="stylesheet" href="./04.css"> </head> <body><!-- 優(yōu)先級：大家同時存在且操作統(tǒng)一對象同一屬性，才會出現(xiàn)沖突，最終起作用的就是優(yōu)先級高的 --><!-- 行間 --><div style="background-color: cyan; color: orange">你是個好人</div> </body> </html>基礎(chǔ)選擇器
<!DOCTYPE html> <html lang="zh"> <head><meta charset="UTF-8"><title>基礎(chǔ)選擇器</title><style type="text/css">/* div => 標簽名 =》 標簽選擇器：開發(fā)過程中盡可能少的運用，運用范圍為最內(nèi)層的顯示層 *//* dd => class 名 =》 類選擇器：布局的主力軍 *//* d => id名 =》 id 選擇器：一定唯一的 *//* * => 通配選擇器 =》控制 html,body,body 下所有用于顯示內(nèi)容的標簽（head 不參與顯示）*/* {border: 1px solid black;}/* 三種選擇器有優(yōu)先級*/div {width: 200px;height: 200px;background-color: red;}/* 類選擇器： .類名{} */.dd {background-color: orange;}/* id 選擇器： #id名 {}*/#d {background-color: green;}/* 優(yōu)先級：id 選擇器 > 類選擇器 > 標簽選擇器 > 通配選擇器*//* 作用范圍越精確，優(yōu)先級越高*/</style><style type="text/css">.div {width: 100px;height: 100px;background-color: orange}/* 多類名：類名與類名之間不能擁有任何符號隔斷 */.red.div{}.div.red {background-color: red;}</style></head> <body><!-- ***** --><!-- 選擇器：css 選擇 html 標簽的一個工具 =》將 html 與 css 建立起聯(lián)系，那么 css 就可以控制 html樣式 --><!-- 選擇器就是給 html 標簽起名字 --><div></div><div class="dd"></div><div class="dd" id="d"></div><div class="div red"></div><div class="div"></div> </body> </html>長度單位與顏色
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>長度單位與顏色</title><style type="text/css">.div {/*px mm cm in em vw vh*/width: 200px;height: 200px;/*顏色單詞 | rgb() 0~255 | rgba | #六個十六進制數(shù)*/background-color: rgba(255,0,255,0.5);/* #abc == #AABBCC*/background-color: #00FFFF}</style> </head> <body><div class="div"></div> </body> </html>文本樣式操作
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>文本樣式操作</title><style type="text/css">.box {width: 200px;height: 200px;background-color: orange}/*字體樣式*/.box {width: 400px;/*字族*//* STSong 作為首選字體，微軟雅黑作為備用字體*/font-family: 'STSong','微軟雅黑';}.box.uu {/* 字體大小*/font-size: 40px;/*字重*/font-weight: 100;/*風格*//*none清除系統(tǒng)字體風格*//*font-style: none;*/font-style: italic;/*行高：某一段文本在自身行高中可以垂直居中顯示=》文本垂直居中*/line-height: 200px;/*字體整體設(shè)置*//*字重 風格 大小/行高 字族 （風格可以省略）*/font: 100 normal 60px/200px 'STSong';/*}i {Normal 清除系統(tǒng)字體風格font-style: normal;}*/</style><style type="text/css">.wrap {width: 200px;height: 200px;background-color: yellow;}.w1 {/*換行方式*/word-break: break-all;}.w2 {width: 400px;/*水平居中：left|center|right*//*text-align: center;*//*字劃線 中下上劃線*/text-decoration: line-through;text-decoration: underline;text-decoration: overline;/*字間距*/letter-spacing: 5px;/*詞間距*/word-spacing: 5px;/*縮進*//*1em 相當于一個字的寬度*/text-indent: 2em;}a {/*取消劃線*/text-decoration: none}</style> </head> <body><div class="box uu">[普通文本]</div><i>i的文本</i><div class="wrap"> 一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五</div><hr><div class="wrap w1"> 一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二</div><hr><div class="wrap w2">hello world hello world</div><a href="sfjsflj">aaa</a> </body> </html>display
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>display</title><style>.box {width: 80px;height: 40px;background-color: orange}.box {/*block: 塊級標簽，獨占一行，支持所有 css 樣式*//*display: block;*//*inline：內(nèi)聯(lián)（行級）標簽，同行顯示，不支持寬高*//*display: inline;*//*inline-block：內(nèi)聯(lián)塊標簽，同行顯示，支持所有 css 樣式*/display: inline-block;/*標簽的嵌套規(guī)則*//*block 可以嵌套所有顯示類型標簽，div|h1~h6|p，*//*注：hn 與 p 屬于文本類型標簽，所以一般只嵌套inline 標簽*//* inline 標簽只能嵌套 inline 標簽，span|i|b|sub|sup|ins|/*inline-block 可以嵌套其他類型標簽，但不建議嵌套任意類型標簽 img|input*/}.b1 {height: 100px;}.b2 {height: 80px;}.b3 {height: 120px;}.box {/*文本基線對齊*/vertical-align: baseline;}</style> </head> <body><div class="box b1">123</div><div class="box b2">456</div><div class="box b3">789</div> </body> </html>轉(zhuǎn)載于:https://www.cnblogs.com/zuanzuan/p/10072831.html
總結(jié)
以上是生活随笔為你收集整理的前端（二）之 CSS的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： linux 设置系统时间
- 下一篇： Odoo10 启动选项