2. 程式人生 > >【CSS】從熟悉到更熟悉

【CSS】從熟悉到更熟悉

阿新 • • 發佈：2018-12-19

最近學習了CSS,一個從熟悉到更熟悉的過程,來說說其中的收穫.

CSS,好像在哪兒見過你

層疊樣式表(英文全稱:Cascading Style Sheets)是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等檔案樣式的計算機語言.CSS不僅可以靜態地修飾網頁,還可以配合各種指令碼語言動態地對網頁各元素進行格式化. 為什麼說CSS是熟悉的,就是因為它是用來表現HTML或XML等檔案樣式的計算機語言,所以如果在接觸CSS之前,接觸過HTML和XML,那麼對於上手CSS也是蠻容易的.

CSS組成

一張圖,廢話就不多說了. 在這裡插入圖片描述

有沒有一種似曾相識的感覺?裡面的內容,在HTML和XML的學習中是不是感覺都有涉及~

CSS其他特性介紹

CSS最重要的就是盒子模型,說白了,就是在一個網頁上面怎麼放盒子,怎麼使盒子放在那兒好看. 在這裡插入圖片描述 這裡面浮動,外邊距的使用,還有定位,要好好體會和使用,用好了整個網頁看起來會高大上,用不好了,呵呵呵…

寫在最後

對於BS的研究和深入,發現基礎的也是最重要的,而且很多東西都是相通的,前面學習了Dom,在Node.js中也有提及,前面研究過的HTML,XML,JavaScript,還有現在研究的CSS,其實說到底就是那麼一些東西,可是想要熟練運用,爛熟於心,動手實踐是肯定少不了的. 說簡單,也簡單,多動手,多操作,其實也沒啥. 說難也難,如果不熟練,對於怎麼操作也還是有些不知道如何下手的. 要學習的,要研究的還有很多~

相關推薦

【CSS】從熟悉到更熟悉

最近學習了CSS,一個從熟悉到更熟悉的過程,來說說其中的收穫. CSS,好像在哪兒見過你 層疊樣式表(英文全稱:Cascading Style Sheets)是一種用來表現HTML（標準通用標記語言的

【微信小程式雲開發】從陌生到熟悉

前言 微信小程式在9月10號正式上線了雲開發的功能，弱化後端和運維概念，以前開發一個小程式需要申請一個小程式，準備一個https的域名，開發需要一個前端一個服務端，有了雲開發只有申請一個小程式，一個前端就能搞定，真的是零成本。 雲開發三大基礎能力 雲函式：執行在微信伺服器上的函式，處理微信相關操作有天然優勢

【Unity3D】從今天開始做UnityProgrammer！（二）簡單熟悉Unity3DEditor的介面

前言：其實前篇基本沒說啥，其實就是在吹水，這節我們要建立我們第一個專案 正文： 開啟UnityEditor建立一個專案，編輯專案名稱和專案路徑，這裡由於我打算做一個小小的動作遊戲，所以命名為ActionProject了，由於博主並不具備美工素質，所以選擇了資源比較容易找

【1】從零開始做第三方支付開發-----初步了解概念

用例 深入 hub 編寫 不知道 了解 程序員 系列 bsp 這是第三方支付開發的第一篇. 目前很多公司在做海外支付, 但是不知道怎麽開始. 本人公司就是做海外產品, 涉及到paypal和stripe支付, 有比較多的經驗, 希望可以幫助需要的朋友. 我是做Java開發,

【css】回想下經典的布局

範圍 使用 you 方式 窮舉 add height 設置 蘊含 　　看到這張圖相信大多數人都很熟悉，這曾經是一種經典的布局方式，一道經典的面試題，但是隨著歲月的流轉，時光的交替（頗有一種“天下風雲出我輩，一入江湖歲月催”的感慨，哈哈），它一步步逐漸退出了歷史舞臺，不過在

【css】選擇器

通配符選擇器標簽、通配符選擇器<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>標簽選擇器</title> <styl

【python】從python開始學編程

python1)變量不需要刪除，可以直接回收使用>>>a = 10 >>>print a.type(a) 10,<type ‘int‘> >>>a = 1.3 >>>print a.type(a) 10,<type ‘

【轉】從msql數據庫處理高並發商品超賣

串行 顯示 字段 pre upd 缺點 訂單 commit 平時 今天王總又給我們上了一課，其實mysql處理高並發，防止庫存超賣的問題，在去年的時候，王總已經提過；但是很可惜，即使當時大家都聽懂了，但是在現實開發中，還是沒這方面的意識。今天就我的一些理解，整理一下這個問題

【css】選擇符

css1)常用選擇符優先級id選擇符(#開頭) > class選擇符(.開頭) > 標簽選擇符(h1等標簽)2)組合選擇符2.1)通配選擇符 *1)適配文檔中的所有html對象 2)用於定義文檔中所有對象的基礎樣式(消除瀏覽器默認設置的基礎樣式) 3)要放在css代碼的首行 4)最常見的用法:*{

【css】HTML標簽主要類型：塊狀元素(block)、行間元素(inline)

css問題背景當某些HTML標簽使用盒模型屬性時，部分屬性失效？ 塊狀元素 獨占一行(是否添加width),該元素前後其他內容都要換行 直接適用盒模型的所有css屬性 行間元素 不獨占一行,多個行間元素可以在一行中呈現 部分適用css盒模型屬性： ·寬度、高

【Python】從文件中讀取數據

ima pen strip() print語句 top src 絕對路徑 列表 pad 從文件中讀取數據 1.1 讀取整個文件 要讀取文件，需要一個包含幾行文本的文件（文件PI_DESC.txt與file_reader.py在同一目錄下） PI_DESC.txt 3.141

【CSS】width和height計算

pre webkit logs mage height web wid div css width:calc(100% - 20px); width:-webkit-calc(100% - 20px);//chrome width:-moz-calc(100% - 20p

【css】設置div位於瀏覽器的最底層，離用戶最遠

gpo 引用 col class 切換 底層 log 優先 pre 有時候切換發現某塊div一直懸浮在最上層，怎麽設置div位於瀏覽器的最底層。離用戶最遠？ 　　<style> .in{ z-index: -1;

kotlin web開發教程【一】從零搭建kotlin與spring boot開發環境

1.8 jre cond utf8 erro 2.0 .com 就會 一個tomcat IDEA中文輸入法的智能提示框不會跟隨光標的問題我用的開發工具是IDEA這個版本的IDEA有一個問題；就是中文輸入法的智能提示框不會跟隨光標解決這個問題的辦法很簡單，只有在安裝目錄下把J

【CSS】非常簡單的css實現div懸浮頁面底部

簡單的 fixed style 簡單 底部 demo 實現 clas post <div id="demo_div"></div> <style> #demo_div{ 　　　left: 0; positi

【CSS】獲取元素的z-index值以及各種值的意義

cti width -i table pre class 解讀 span 描述 js可以獲取其元素的z-index值： $("document").ready(function(){ var a = $(‘.row‘).css(‘z-index‘); a

【css】box-shadow匹配ps投影效果/text-shadow

csdn tail 實體 換算 sin 距離 css3 .com set 參照資料：http://blog.csdn.net/lpandeng/article/details/72778451 box-shaow: 距離(x-offset y-offset) 虛影(blu

【CSS】一側定寬，另一側自適應的布局該如何去做

sid col 給他 如何 布局 height css代碼 取值 black 一側定寬，一側自適應的頁面布局在現在用的很多，有哪些實現方式呢？ 1,通過浮動和margin取正值來實現： 定寬的元素為#sidebar 自適應的元素為#content css代碼如下： 　　　　

【學習】從.txt文件讀取生成編譯代碼。

tab 找到 ret eve 嵌入 IT pan compile () 1 string code = null; 2 String projectName = Assembly.GetExecutingAssembly().

【css】彈性盒模型

方法 wid 16px AC top 排列 items fcc position 彈性盒模型flexBox 彈性盒模型是c3的一種新的布局模式 它是指一種當頁面需要適應不同屏幕大小以及設備類型時，確保元素有恰當行為的布局方式。 引入彈性盒模型布局的目的是提供一種更有效的方法