從零開始寫代碼(九),CSS選擇器以及一些屬性

2020-12-16 大頭家的程序猿

Hello,今天繼續學習的是常用到的css選擇器的一些類型,包括裡面用到的屬性,又到了像是學英語單詞的時候,還是那句話,雖然這些東西都可以在用的時候去查,但是作為一個合格的程式設計師,怎麼能邊寫代碼邊查呢!

組合選擇器

1 多元素選擇器

描述:給多個元素加同一個樣式,多個選擇器之間用逗號「,」隔開

舉例:h1,p,div,body{color:red}

2 後代元素選擇器(最常用的)

描述:給某個標籤的所有後代元素加樣式

舉例:div .title{color:red}

代碼

3 子元素選擇器

描述:給某個元素的子元素添加樣式

舉例:div>h1.title{color:red}

CSS尺寸屬性

Width:元素寬度,一定要加px單位

Height:元素高度

CSS字體屬性

Font-size:字體大小。如:font-size:14px

Font-family:字體。如font-family:微軟雅黑

Font-style:斜體,取值:italic。如:font-style:tialic

Font-weight:粗體,取值:bold。如:font-weight:bold

CSS文本屬性

Color:文本顏色

Text-decoration:文本修飾線,取值:none(無)、underline(下劃線)、overline(上劃線)、line-through(刪除線)

Text-align:文本水平對齊方式,取值:left、center、right

Line-height:行高,可以用固定值,也可以用百分比。如:line-height:24px;line-height:150%

Text-indent:首行縮進。如:text-indent:28px

Letter-spacing:字間距。

我在學習的過程在想CSS這些屬性和html一些標記不是起到的是相同的效果嗎,為什麼要有兩種寫法,寫html簡單的那種不就好了嗎,辦公室裡的大佬給我解釋了一下就是,有些情況下html並不能滿座你的需求,就需要CSS來實現你的需求,所以就要用CSS的寫法,而正常來說,兩種是可以自由選擇的。

今天又是需要記的一些東西,需要多加練習,還是那句話,熟能生巧,用多了就記住了,當然這也不是必須的,如果你的時間緊迫,還是了解一下意思,明白使用的區別就好了

相關焦點

  • CSS核心基礎 一些常見的選擇器的使用 小白教程
    他的基本語法格式為:標記名 { 屬性1:屬性值1; 屬性2:屬性值2; ... }2.類選擇器類選擇器使用「.3.id選擇器id選擇器使用「#」井號進行標識,後面緊跟id名,其基本語法格式如下:#id名 { 屬性1:屬性值1; 屬性2:屬性值2; .
  • HTML+CSS:css選擇器介紹之標籤選擇器、類選擇器以及ID選擇器
    上篇文章給大家說了css的三種不同的引入方式,今天給大家說一下css的三種選擇器:標籤選擇器、類選擇器和ID選擇器。那麼有人就會問了,什麼是選擇器?我們寫的css樣式聲明(定義)由兩部分組成,形式如下:選擇器{ 樣式;},在{}之前的部分就是「選擇器」,「選擇器」指明了{}中的「樣式」的作用對象,也就是「樣式」作用於網頁中的哪些元素。比如我們之前寫的span{ color:#f00; }中的span就為一個選擇器。
  • Web前端學習第22課,理解CSS標識選擇器、類選擇器和屬性選擇器
    id就是HTML文檔中的一個全局屬性。你可以為任何元素添加id屬性,只要它們的id取值不同即可。也就是說id的值就像一個人的身份證號,在一個網頁中只能出現一次。下面的 HTML 代碼中,我們為一個段落元素p加上一個id屬性,它的值是red(red在這個網頁中只能出現一次,你可以為任何元素設置任何你喜歡的id值,只要它們不相同即可)。
  • jQuery元素選擇器、屬性選擇器和CSS類名選擇器的案例實戰源碼
    jQuery選擇器將選取的Html元素進行了分類,分別有:元素選擇器:是指可以通過Html的標籤名查找到指定的元素。屬性選擇器:是指可以通過屬性名或內容查找到指定的元素。CSS選擇器:是指通過CSS樣式相關的屬性查找到指定的元素。在jQuery中,選擇器的操作最終的結果都是一個集合,需要進一步處理集合中的元素,然後進行操作。
  • HTML+CSS:掌握css的繼承以及代碼的優先級問題
    上邊文章我們說了使用css的三種不同的選擇器,本篇文章我們主要介紹css的繼承規則以及css代碼的權重優先級問題。(1)css的繼承規則CSS的某些樣式代碼是具有繼承性的,那麼究竟什麼是繼承呢?經過我們總結測試,可以得出以下結論:關於文字樣式的屬性,都具有繼承性。這些屬性包括:color、 text-開頭的、line-開頭的、font-開頭的。關於盒子、定位、布局的屬性,都不能繼承。
  • 從零開始學習jQuery (二) 萬能的選擇器
    學習jQuery選擇器是學習jQuery最重要的一步. 無論是在寫程序還是看API文檔,  我們要時刻注意區分Dom對象和jQuery包裝集.上面摘選自jQuery官方手冊.Returns的類型為jQuery即表示返回的是jQuery包裝集.其中第一個方法有些問題, 官方接口寫的是CSS選擇器, 但是實際上這個方法不僅僅支持CSS選擇器, 而是所有jQuery支持的選擇器, 有些甚至是jQuery自定義的選擇器(在CSS標準中不存在的選擇器)。
  • 從零開始寫代碼(八),十分鐘學會CSS怎樣使用!
    希望也都還沒忘前些天所學的內容,因為被公司的程式設計師吐槽了一下,一致認為我後來寫的內容有點不實用,我就開始學習CSS的內容了。CSS語法格式H1 {colol:red; font-size:14px;}一個CSS規則,由「選擇器」和「格式聲明語句」構成。
  • (02)CSS 選擇器詳解 | CSS
    2 組合選擇器2.1 多元素選擇器🔗源碼及效果展示https://jsbin.com/nufakuwuyi/edit?html,css,outputh1, h2 {  background: yellow;}❗️注意多個選擇器之間必須有 , 這個字符。
  • 【第891期】用css來做html代碼檢查
    正文從這開始~當我們在寫HTML的時候,出現語法錯誤的時候很難察覺。這很容易導致代碼裡面有 無效的,詭異的殭屍代碼,而且很不明顯。有很多方法來檢查我們的HTML代碼,發現並解決錯誤,比如:使用 W3C標籤校驗服務 。 另外我們也有簡單的方法並且能將其整合到我們的工作流當中來,那就是:使用一些稍微高級的CSS選擇器來高亮潛在問題區域。
  • css 常用選擇器
    在HTML(標準通用標記語言下的一個應用)中,根元素永遠是HTMLcss關係選擇器:E F{} 選擇所有被E元素包含的F元素。css屬性選擇器E[att]{} 選擇具有att屬性的E元素。E[att=」val」]{} 選擇具有att屬性且屬性值等於val的E元素。
  • 11 - 前端開發 - CSS 選擇器
    DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS 選擇器</title> <style type="text/css"> li{color: red}</style></head>
  • CSS核心基礎之CSS基礎知識介紹
    樣式表是由一系列樣式選擇器和CSS屬性組成,它支持字體屬性、顏色和背景屬性、文本屬性、邊框屬性、列表屬性以及精確定位網頁元素屬性等,增強了網頁的格式化功能。CSS樣式實際上可以看成是屬性的集合。2. CSS的特點除了可擴展HTML的樣式設定外,CSS的特點主要包含如下幾點:1.減少圖形文件的使用。2.集中管理樣式信息。3.共享樣式設定。4.將樣式分類使用。3.
  • 注意CSS代碼中的!important屬性
    首頁 > 教程 > 關鍵詞 > 注意最新資訊 > 正文 注意CSS代碼中的!前幾天寫一些CSS代碼的時候又難為我了,因為那個該死的IE6對CSS的支持是如此的差勁,以前我還沒注意過,因為做的東西基本都是基於IE的,可是我這次為博客寫的CSS要支持不止IE一個瀏覽器,可恨的是我裝的Windows 7,這裡面自帶的是IE8瀏覽器,我自認為已經沒有問題了,可是打開IE6,仍然出現錯位,於是我決定看看IE6到底是什麼情況。
  • 編程技術—CSS技術<一>
    為什麼使用css代替HTML屬性設置樣式呢?因為HTML屬性在單獨使用時有一定的局限性,所以需要配合css樣式代碼才可以更好的展示更為豐富的效果。4.css的代碼規範放置規範:在<style>標籤內容體中書寫css樣式代碼<style>標籤放置在《head》標籤之中格式規範:
  • 編寫出色CSS代碼的13個建議
    CSS學起來並不難,但在大型項目中,就變得難以管理,特別是不同的人在CSS書寫風格上稍有不同,團隊上就更加難以溝通,為此總結了一些如何實現高效整潔的CSS代碼原則:1. 使用Reset但並非全局Reset不同瀏覽器元素的默認屬性有所不同,使用Reset可重置瀏覽器元素的一些默認屬性,以達到瀏覽器的兼容。
  • CSS入門
    -- 使用<style>可以編寫CSS代碼 語法: 選擇器:{ 聲明1; 聲明2; ; }-->
  • DIV+CSS網頁布局常用的一些基礎知識整理
    調用樣式表:外部樣式表調用:頁面內嵌法:就是將樣式表直接寫在頁面代碼的head區。 XML/HTML代碼 .mainMenu ul li {background:url(images/bg.gif;)}   關於選擇器,您可以參考:https://www.52css.com/search.asp?
  • 20個讓你效率更高的CSS代碼技巧
    這裡有一個快速的方法來刪除所有的雙倍邊框:border-collapse: collapse,只需設置這個屬性後,表格的邊框看起來就順眼多了:7.更友好的注釋CSS也許不是一種程式語言,但其代碼仍然需要文檔化。添加一些簡單的注釋可以將代碼分類區分,方便自己和同事後期維護。
  • 20 個讓你效率更高的 CSS 代碼技巧
    當然,CSS中並不是所有的屬性都是可繼承的,對於這些屬性我們仍然需要在每個元素上單獨設置。10.使用transform屬性來創建動畫最好使用transform()函數來創建元素的位移或大小動畫,儘量不要直接改變元素的width,height以及left/top/bottom/right屬性值。
  • HTML+CSS:認識css的概念與語法,了解css的優勢
    之前的文章給大家介紹了下網頁中常用的html的基本知識,從這篇文章開始我們開始介紹css的內容。可以這麼說學完了html你可以做出網頁的框架,學好了css之後呢,你就可以給做好的框架進行美化填色,做出各種各樣的網頁。