前端三劍客之 css

時間  2019-11-22
標籤 前端 劍客 css 欄目 CSS 简体版
原文   原文鏈接

css參數大全

引入方式：

行內引用css

行內式是在標記的style屬性中設定CSS樣式。不推薦大規模使用。html

<p style="color: red">Hello world.</p>

內部引用api

嵌入式是將CSS樣式集中寫在網頁的 head 標籤對的 style 標籤對中。瀏覽器

<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
    background-color: #2b99ff;
}
</style>
</head>

外部樣式ssh

外部樣式就是將css寫在一個單獨的文件中，而後在頁面進行引入便可。推薦使用此方式。ide

<link href="mystyle.css" rel="stylesheet" type="text/css"/>

CSS 選擇器

基本選擇器

元素選擇器 ：直接以元素名定義
p {color: "red";}
ID 選擇器 ：以 「#」 + ID 名定義
#i1 {
background-color: red;
}
類選擇器 ：以 「.」 + 類名 定義
.c1 {
font-size: 14px;
}
p.c1 {
color: red;
}
  • 注意：

    • 樣式類名不要用數字開頭（有的瀏覽器不認）。字體

    • 標籤中的class屬性若是有多個，要用空格分隔。url

​

通用選擇器 ：以 「*」直接開頭定義
* {
color: white;
}

組合選擇器

後代選擇器
/*li內部的a標籤設置字體顏色*/
li a {
color: green;
}
兒子選擇器
/*選擇全部父級是 <div> 元素的 <p> 元素*/
div>p {
font-family: "Arial Black", arial-black, cursive;
}
毗鄰選擇器
/*選擇全部緊接着<div>元素以後的<p>元素*/
div+p {
margin: 5px;
}
弟弟選擇器
/*i1 [後面] 全部的兄弟p標籤*/
#i1~p {
border: 2px solid royalblue;
}

屬性選擇器

/*用於選取帶有指定屬性的元素。*/
p[title] {
color: red;
}
/*用於選取帶有指定屬性和值的元素。*/
p[title="213"] {
color: green;
}

分組和嵌套

  • 分組
div,
p {
color: red;
}

  • 當多個元素的樣式相同的時候，咱們沒有必要重複地爲每一個元素都設置樣式，咱們能夠經過在多個選擇器之間使用逗號分隔的分組選擇器來統一設置元素樣式。spa

  • 一般，咱們會分兩行來寫，更清晰:code

  • 嵌套
.c1 p {
color: red;
}
  • 多種選擇器能夠混合起來使用，好比：[.c1類內部全部p標籤] 設置字體顏色爲紅色

僞類選擇器

/* 未訪問的連接 */
a:link {
color: #FF0000
}

/* 已訪問的連接 */
a:visited {
color: #00FF00
} 

/* 鼠標移動到連接上 */
a:hover {
color: #FF00FF
} 

/* 選定的連接 */ 
a:active {
color: #0000FF
}

/*input輸入框獲取焦點時樣式*/
input:focus {
outline: none;
background-color: #eee;
}

僞元素選擇器

first-letter
/*經常使用的給首字母設置特殊樣式 */
p:first-letter {
font-size: 48px;
color: red;
}
before
/*在每一個<p>元素以前插入內容*/
p:before {
content:"*";
color:red;
}
after
/*在每一個<p>元素以後插入內容*/
p:after {
content:"[?]";
color:blue;
}
注：before和after多用於清除浮動。

選擇器的優先級

  • 除此以外還能夠經過添加 !important方式來強制讓樣式生效，但並不推薦使用。由於若是過多的使用!important會使樣式文件混亂不易維護。

CSS 盒子模型

  • margin: 用於控制元素與元素之間的距離；margin的最基本用途就是控制元素周圍空間的間隔，從視覺角度上達到相互隔開的目的。
  • padding: 用於控制內容與邊框之間的距離；
  • Border(邊框): 圍繞在內邊距和內容外的邊框。
  • Content(內容): 盒子的內容，顯示文本和圖像。

clear

clear屬性規定元素的哪一側不容許其餘浮動元素。

值 描述
left 在左側不容許浮動元素。
right 在右側不容許浮動元素。
both 在左右兩側均不容許浮動元素。
none 默認值。容許浮動元素出如今兩側。
inherit 規定應該從父元素繼承 clear 屬性的值。

注意：clear屬性只會對自身起做用，而不會影響其餘元素。

清除浮動

清除浮動的反作用（父標籤塌陷問題）

主要有三種方式：

  • 固定高度
  • 僞元素清除法
  • overflow:hidden

僞元素清除法（使用較多）：

.clearfix:after {
 content: "";
 display: block;
 clear: both;
}

Overflow 溢出屬性

值 描述
visible 默認值。內容不會被修剪，會呈如今元素框以外。
hidden 內容會被修剪，而且其他內容是不可見的。
scroll 內容會被修剪，可是瀏覽器會顯示滾動條以便查看其他的內容。
auto 若是內容被修剪，則瀏覽器會顯示滾動條以便查看其他的內容。
inherit 規定應該從父元素繼承 overflow 屬性的值。
  • overflow（水平和垂直均設置）
  • overflow-x（設置水平方向）
  • overflow-y（設置垂直方向）

CSS屬性大全

CSS 位置屬性()：

z-index: 999; /*對象的層疊順序*/
opacity: 0.1; /*定義透明效果*/


float  浮動
float: left; /*向左漂浮*/
float: right; /*向右浮動*/
float: none; /*默認值，無浮動*/
overflow: hidden /*清除浮動反作用方法1*/
.clearfix:after{ /*清除浮動方法2*/
 content:"";
 display: block;
 clear: both;
}

position  定位
position: static; /*默認值，無定位*/
position:relative;  /*相對定位，不脫離文檔流*/
position:abslute;  /*絕對定位，脫離文檔流*/ 
position:fixed;  /*固定定位，脫離文檔流*/




display 顯示效果
display:"none" /*font-weight:bold; /*文字粗體*/ */
display:"block" /*默認佔滿整個頁面寬度，若是設置了指定寬度，則會用margin填充剩下的部分。*/
display:"inline" /*默認佔滿整個頁面寬度，若是設置了指定寬度，則會用margin填充剩下的部分。*/
display:"inline-block" /*默認佔滿整個頁面寬度，若是設置了指定寬度，則會用margin填充剩下的部分。*/
display:"none"與visibility:hidden的區別：
  visibility:hidden: 能夠隱藏某個元素，但隱藏的元素仍需佔用與未隱藏以前同樣的空間
  isibility:hidden: 能夠隱藏某個元素，但隱藏的元素仍需佔用與未隱藏以前同樣的空間


clear 不容許其餘元素浮動元素
clear:left;/*  在左側不容許浮動元素。*/
clear:right;/* 在右側不容許浮動元素。*/
clear:both;/*  在左右兩側均不容許浮動元素。*/
clear:none;/*  默認值。容許浮動元素出如今兩側。*/
clear:inherit;/*   規定應該從父元素繼承 clear 屬性的值。*/


overflow 溢出屬性
overflow-y:  ;/*設置水平方向*/
overflow-x:  ;/*設置垂直方向*/
overflow:visible;/*    默認值。內容不會被修剪，會呈如今元素框以外。*/
overflow:hidden;/* 內容會被修剪，而且其他內容是不可見的。*/
overflow:scroll;/* 內容會被修剪，可是瀏覽器會顯示滾動條以便查看其他的內容。*/
overflow:auto;/*   若是內容被修剪，則瀏覽器會顯示滾動條以便查看其他的內容。*/
overflow:inherit;/*    規定應該從父元素繼承 overflow 屬性的值。*/

CSS文字屬性(font)：

color : #999999; /*文字顏色*/
font-family : 宋體,sans-serif;/*文字字體*/ 
font-size : 9pt; /*文字大小*/ 
font-style:italic; /*文字斜體*/ 
font-weight:bold; /*文字粗體*/ 
font-variant:small-caps; /*小字體*/ 
letter-spacing : 1pt; /*字間距離*/ 
line-height : 200%; /*設置行高*/ 
vertical-align:sub; /*下標字*/ 
vertical-align:super; /*上標字*/ 
text-decoration:line-through; /*加刪除線*/ 
text-decoration: overline; /*加頂線*/ 
text-decoration:underline; /*加下劃線*/ 
text-decoration:none; /*刪除連接下劃線*/ 
text-transform : capitalize; /*首字大寫*/ 
text-transform : uppercase; /*英文大寫*/ 
text-transform : lowercase; /*英文小寫*/ 
text-align:right; /*文字右對齊*/  
text-align:left; /*文字左對齊*/ 
text-align:center; /*文字居中對齊*/ 
text-align:justify; /*文字分散對齊*/
text-indent: 32xp; /*首行縮進*/

vertical-align 屬性
vertical-align:top; /*垂直向上對齊*/ 
vertical-align:bottom; /*垂直向下對齊*/ 
vertical-align:middle; /*垂直居中對齊*/ 
vertical-align:text-top; /*文字垂直向上對齊*/ 
vertical-align:text-bottom; /*文字垂直向下對齊*/

CSS列表符號屬性(List-style)：

list-style-type:none; /*不編號*/ 
list-style-type:decimal; /*阿拉伯數字*/ 
list-style-type:lower-roman; /*小寫羅馬數字*/ 
list-style-type:upper-roman; /*大寫羅馬數字*/ 
list-style-type:lower-alpha; /*小寫英文字母*/ 
list-style-type:upper-alpha; /*大寫英文字母*/ 
list-style-type:disc; /*實心圓形符號*/ 
list-style-type:circle; /*空心圓形符號*/ 
list-style-type:square; /*實心方形符號*/ 
list-style-image:url(/dot.gif); /*圖片式符號*/ 
list-style-position: outside; /*凸排*/ 
list-style-position:inside; /*縮進*/

CSS背景樣式 (background)：

background-color:#F5E2EC; /*背景顏色*/  
ba /*透視背景*/ 
background-image : url(/image/bg.gif); /*背景圖片*/ 
background-attachment : fixed; /*浮水印固定背景*/ 
background-repeat : repeat; /*重複排列-網頁默認*/ 
background-repeat : no-repeat; /*不重複排列*/ 
background-repeat : repeat-x; /*在x軸重複排列*/ 
background-repeat : repeat-y; /*在y軸重複排列*/ 
指定背景位置
background-position : 90% 90%; /*背景圖片x與y軸的位置*/ 
background-position : top; /*向上對齊*/ 
background-position : buttom; /*向下對齊*/ 
background-position : left; /*向左對齊*/ 
background-position : right; /*向右對齊*/ 
background-position : center; /*居中對齊*/

CSS方框屬性： (Box)

width:; height:; float:; clear:both; margin:; padding:;     /*4個參數：順序：上右下左， 兩個參數(上下，左右)*/

CSS邊框空白：(padding)

padding-top:10px; /*上邊框留空白*/ 
paddving-right:10px; /*右邊框留空白*/ 
padding-bottom:10px; /*下邊框留空白*/ 
padding-left:10px; /*左邊框留空白*/

CSS框線一覽表：(border)

border-top : 1px solid #6699cc; /*上框線*/ 
border-bottom : 1px solid #6699cc; /*下框線*/ 
border-left : 1px solid #6699cc; /*左框線*/  
border-right : 1px solid #6699cc; /*右框線*/ 
以上是建議書寫方式,但也可使用常規的方式以下:
border-top-color : #369 /*設置上框線top顏色*/ 
border-top-width :1px /*設置上框線top寬度*/ 
border-top-style : solid/*設置上框線top樣式*/ 
border-radius: 50%/*實現圓角邊框的效果*/
box-shadow:0 0 2px #fff  /*邊框陰影*/

其餘框線樣式
solid /*實線框*/ 
dotted /*虛線框*/ 
double /*雙線框*/ 
groove /*立體內凸框*/ 
ridge /*立體浮雕框*/ 
inset /*凹框*/ 
outset /*凸框*/

CSS邊界樣式：(margin)

margin-top:10px; /*上邊界*/ 
margin-right:10px; /*右邊界值*/ 
margin-bottom:10px; /*下邊界值*/ 
margin-left:10px; /*左邊界值*/

CSS鏈接屬性(cursor)：

a /*全部超連接*/ 
a:link /*超連接文字格式*/  
a:visited /*瀏覽過的連接文字格式*/ 
a:active /*按下連接的格式*/ 
a:hover /*鼠標轉到連接*/ 

鼠標光標樣式：
CURSOR: hand /*連接手指*/
cursor:crosshair /*十字體*/
cursor:s-resize /*箭頭朝下*/
cursor:move /*十字箭頭*/
cursor:move /*箭頭朝右 */
cursor:help /*加一問號 */
cursor:w-resize /*箭頭朝左*/
cursor:n-resize /*箭頭朝上*/
cursor:ne-resize /*箭頭朝右上*/
cursor:nw-resize /*箭頭朝左上*/
cursor:text /*文字I型*/
cursor:se-resize /*箭頭斜右下*/
cursor:sw-resize /*箭頭斜左下*/
cursor:wait /*漏斗*/
光標圖案(IE6)  p {cursor:url("光標文件名.cur"),text;}
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程