前端學習系列筆記--CSS

時間  2019-12-06
標籤 前端 學習 系列 筆記 css 欄目 CSS 简体版
原文   原文鏈接

CSS快速入門

CSS語法

hi{color:red;front-size:12px;}
複製代碼

在上面的CSS代碼中：css

  • h1 是選擇器
  • {color:red;front-size:12px;} 是聲明
  • color是屬性名稱
  • red是屬性值
  • color:red; 被稱爲一個聲明

demo:html

<html>
	<head>
  <style type="text/css">
  	p{
      color:red;
      text-align:center;
    }
  </style>
  </head>
	<body>
		<p>Hello World</p>
	</body>
</html>
複製代碼

CSS包含

  • 內聯樣式(不推薦使用)
<!DOCTYPE HTML>
<html>
<body>
   <a href="https://www.w3cschool.cn"  
      style="background-color:grey; color:white"> 
      Visit the website
   </a>
   <p>This is a test.</p>
   <a href="https://www.w3.org">Visit the W3C website</a>
</body>
</html>
複製代碼
  • 嵌入式樣式(不推薦使用)
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
a {
    background-color:grey;
    color:white
}
</style>
</head>
    <body>
        <a href="https://www.w3cschool.cn">Visit the website</a>
        <p>This is a test.</p>
        <a href="https://www.w3.org">Visit the W3C website</a>
    </body>
</html>
複製代碼
  • 外部樣式表

方式一：建立具備.css文件擴展名的單獨的樣式表文件，並在每一個HTML頁面中定義相同的樣式集。
styles.css:web

a  {
    background-color:grey;
    color:white
}
span  {
    border: thin  black solid;
    padding:  10px;
}
複製代碼

demo.html:瀏覽器

<!DOCTYPE HTML>
<html>
<head>
   <link rel="stylesheet" type="text/css" href="styles.css"></link>
</head>
<body>
    <a href="https://www.baidu.cn">百度</a>
    <p>I like <span>books</span> and speed.</p>
</body>
</html>
複製代碼

方式二：使用 @import 語句，@import語句必須出如今樣式表的頂部，在定義任何新樣式以前
combined.css：佈局

@import "styles.css";
span  {
    border: medium black dashed;
    padding:  10px;
}
複製代碼
<!DOCTYPE HTML>
<html>
    <head>
       <link rel="stylesheet" type="text/css" href="combined.css"/>
    </head>
    <body>
        <a href="https://www.baidu.cn">百度</a>
    		<p>I like <span>books</span> and speed.</p>
    </body>
</html>
複製代碼

CSS字符編碼

在CSS樣式表中的@import語句以前，只有一個@charset語句。
@charset語句指定樣式表使用的字符編碼。字體

@charset  "UTF-8";
@import "styles.css";
span  {
    border: medium black dashed;
    padding:  10px;
}
複製代碼

CSS樣式級聯

瀏覽器使用如下順序查找屬性值。編碼

  • 內聯樣式 - 使用元素上的style全局屬性定義的樣式
  • 嵌入式樣式 - 在樣式元素中定義的樣式
  • 外部樣式 - 使用連接元素導入的樣式
  • 用戶樣式 - 已由用戶定義的樣式（內聯樣式，嵌入樣式和樣式表）
  • 瀏覽器樣式 - 瀏覽器應用的默認樣式

重要樣式：
能夠用  !important ，能夠將單個標記做爲重要。會把優先級調到最高，覆蓋掉其餘的樣式。url

a  {
   color:  black !important;
}
複製代碼

繼承：
若是瀏覽器找不到一個可用樣式中的值，它將使用繼承。
繼承意味着獲取由父元素定義的屬性的值。spa

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css"> p { color:white; background:grey; border: medium solid black; } </style>
</head>
<body>
    <a href="https://www.baidu.cn">baidu</a>
    <p>This is a <span>test</span>.</p>
</body>
</html>
複製代碼

span元素的父代是p元素。
span元素從父p元素繼承color屬性。
不是全部的CSS屬性都是繼承的。
只有與外觀相關的是繼承的，包括文本顏色，字體詳細信息等。
與佈局相關的不是繼承。code

強制繼承inherit關鍵字
inherit顯式地告訴瀏覽器對屬性使用父元素的值.

<!DOCTYPE HTML>
<html>
  <meta charset="UTF-8">
<head>
<style type="text/css"> p { color:white; background:grey; border: medium solid black; } span { border: inherit; } </style>
</head>
<body>
    <a href="https://www.baidu.cn">百度</a>
    <p>This is a <span>demo</span> from yuque.</p>
    <a href="https://www.yuque.com">語雀</a>
</body>
</html>
複製代碼

CSS基本樣式

CSS選擇器

CSS選擇器能夠基於其id,類，類型，屬性，屬性值等選擇HTML元素。

  • 元素選擇器
a {
  border: thin black solid;
  padding: 4px;
}
複製代碼
  • ID選擇器
#myid{
	border: thin black solid;
  padding: 4px;
}
複製代碼
  • class選擇器
.class1 {
  border: thin black solid;
  padding: 2px;
}
複製代碼

或

span.class1 {
  border: thin black solid;
  padding: 2px;
}
複製代碼
  • 分組選擇器
h1,h2,p{
	text-align:center;
  color:green;
}
複製代碼

CSS背景

屬性 描述 屬性值（例子）
background-color 元素背景色 background-color：lightgray;
background-image 背景圖 background-image: url('/images/img_flowers.jpg')
background-repeat 背景圖像的重複樣式
- repeat(默認)
- repeat-x
- repeat-y
- no-repeat
- inherit
background-size 背景圖像大小 background-size：50px 50px;
background-position 背景圖像其實位置 left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
--------------
x% y%
--------------
xpos ypos（指定像素值，例：（0px 10px)）
--------------
inherit:指定background-position屬性設置應該從父元素繼承
background-attachment 修復或滾動背景圖像與頁面的其他部分
- scroll  背景圖片隨頁面的其他部分滾動。(默認)
- fixed 背景圖像固定
- inherit 指定background-attachment的設置應該從父元素繼承
- local 背景圖片隨滾動元素滾動
background-clip 設置背景的繪製區域
- border-box （默認）
- padding-box
- content-box
background-origin 設置背景圖像定位
- padding-box:背景圖像填充框的相對位置
- border-box:背景圖像邊界框的相對位置
- content-box:背景圖像的相對位置的內容框
background 背景屬性在一個聲明

CSS文本

屬性 描述
letter-spacing 設置文本中字符之間的間距
tab-size 設置製表符char大小
word-break 爲非CJK腳本設置換行規則
word-spacing 設置文本中單詞之間的空格
word-warp 容許長的內容能夠自動換行
text-align-last 最後一行如何對齊
text-align 文本的水平對齊
text-decoration-color 設置文本修飾的顏色
text-decoration-line 設置文本修飾的線條樣式
text-decoration-style 集修飾樣式
text-indent 設置文本縮進大小
text-justify 設置對齊方式
text-overflow 設置溢出內容的操做
text-shadow 將陰影添加到文本
text-transform 設置文本的大小寫

CSS字體

屬性 描述
font-face 從web加載字體
font-family 設置文本的字體系列
font-size-adjust 設置在發生字體回退時文本的可讀性
font-size 設置文本的字體大小
font-stretch 爲字體系列選擇正常，濃縮或展開的面
font-style 設置文本的字體樣式
font-variant 設置爲使用小寫字體
font-weight 設置字體的粗細
font 字體的簡寫屬性

CSS連接

連接狀態樣式：
除了正常的樣式以外，錨連接也能夠基於其狀態來設置樣式。
四個連接狀態是：

  • a:link - 未訪問的連接
  • a:visited - 已訪問的連接
  • a:hover - 一個懸停（mouses over it）連接。
  • a:active - 連接正在點擊

未完待續.......

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程