前端-CSS

時間  2020-06-20
標籤 前端 css 欄目 CSS 简体版
原文   原文鏈接

目錄

CSS總結

  • CSS(Cascadig style sheet)：層疊樣式表
  • 選擇器{屬性1:值1;屬性2:值2;……}

CSS代碼的引入方式

1.直接寫在head標籤裏面
<head>
    <style>
        .c1{background-color:red;text-align:center;}
    </style>
</head>
2.直接寫在body標籤裏面   (也叫內聯選擇器)
<head>
	<div style="background-color:red;text-align:center;"></div>
</head>
3.寫入head標籤裏，從外部文件引入
<link rel='stylesheet' href='目標css文件'>

選擇器

基本選擇器

元素選擇器css

標籤{屬性:值}
div{height=100px;width=100px;}

類選擇器html

.類名{屬性:值}
.c1{height=100px;width=100px;}

id選擇器瀏覽器

#id值{屬性:值}					
.d1{height=100px;width=100px;}

通用選擇器佈局

*{屬性:值}                   #全部標籤都會具備的屬性
*{height=100px;width=100px;}

組合選擇器

後代選擇器字體

div a{屬性:值}  	#表示div標籤後的全部a標籤

兒子選擇器url

div>a{屬性:值}		#表示以div爲父級標籤的全部a標籤

毗鄰選擇器code

div+a{屬性:值}		#div標籤的下一個標籤

弟弟選擇器orm

div~a{屬性:值}		#div標籤後下一個爲a的全部標籤

屬性選擇器

  • 屬性選擇器通常用在input標籤中
input[title]{color:red} 			#找到屬性爲title的input標籤
input[title='text']{color:red} 		#找到屬性爲title，且值爲text的input標籤

僞類選擇器

  • 僞類選擇器通常用於a標籤
a:link{}        #未訪問的網址連接
a:visited{}		#訪問過的網址連接
a:active{}		#鼠標點擊連接但還未擡起的時候
a:hover{}		#鼠標移動到連接上，也可適用於其餘標籤
#注意，要想a標籤同時具備移動到標籤時改變屬性的效果以及點擊連接時改變屬性的效果，必須先把active放在前面
input:foucus{outline:none;background-color:pink}  #當選中input標籤文本框時產生效果

僞元素選擇器

標籤:first-letter{}
div:first-letter{color:red;font-size:20px}
標籤:before{}
p:before{content:'呵呵',color:blue;font-size:20px}
標籤:after{}
p:after{content='哈哈',color:pink;font-size:20px}

分組與繼承

#分組
div,p{屬性:值}
#繼承
因此的父級標籤的屬性後代都會有，除非後代本身設置了相同的屬性將其覆蓋

CSS選擇器的優先級

繼承的優先級(權重)爲0
元素選擇器的優先級爲1
類選擇器的優先級爲10
id選擇器的優先級爲100
內聯選擇器的優先級爲1000
能夠經過添加!important屬性使得標籤的優先級最高

屬性

高度寬度

height:高度
width:寬度
.c1{
	height:100px;
	width:100px
}

字體屬性

  • font-family:字體htm

  • font-size:字體大小 默認爲16px繼承

  • font-weight:字體粗細 字體粗細有normal、bold、bolder、100-900(400等於normal，700等於bold)

  • color:字體顏色 顏色有四種形式

    • color:red #顏色單詞
    • color:#ffffff #六位16進制
    • color:rgb(255,0,0) #rgb三原色比
    • color:rgba(255,0,0,0.4) #a表示透明度
.c1{
	font-family:'宋體','楷體','黑體';
	font-size:20px
	font-weight:bold
	color:rgba(255,255,0,0.3)
}

文字屬性

  • 文字排列：text-align:排列方式

    • left：左對齊，默認
    • right：右對齊
    • center：居中對齊
    • justify：兩端對齊

  • 文字裝飾：text-decorate:裝飾方式

    • none：默認，標準文本
    • underline：定義文本下的一條線
    • overline：定義文本上的一條線
    • line-through：穿過文本的一條線
    • inherit：繼承父類元素的text-decoration屬性的值

  • 首行縮進：text-indent:32px

    .c1{
	text-align:center;
	text-decorate:none;
	text-indent:32px;
}

背景屬性

  • background-color:背景顏色

    • background-color:red #顏色單詞
    • background-color:#ffffff #六位16進制
    • background-color:rgb(255,0,0) #rgb三原色比

  • background-image:url('路徑')

  • background-repeat:重複方式

    • repeat(默認)：背景圖片在x,y軸下鋪滿整個標籤
    • no-repeat：背景圖片不重複
    • repeat-x：在x軸上鋪滿
    • repeat-y：在y軸上鋪滿

  • background-position:位置

    • left top center top right top
    • left center center center right center
    • left bottom center bottom right bottom
    .c1{
	background-color:rgb(255,0,0);
	background-image:url('佛盧瓦.jpg');
	background-repeat:no-repeat;
	background.position:center center;
}
#簡寫形式
.c1{
    background:rgb(255,0,0) url('佛盧瓦.jpg') no-repeat center center;
}

邊框屬性border

  • border-width:寬度
  • border-style:樣式
    • solid:邊框爲實線
    • dashed：邊框爲虛線
    • dotted：邊框爲點
  • border-color:顏色
    • color:red
    • color:#ffffff
    • color:rgb(255,0,0)
  • border-radius:百分比 控制四角圓度 50%就爲圓形
.c1{
	width:200px;
	height:200px;
	border-width:10px;
	border-style:solid;
	border:red;
	border-radius:50%;
}

display屬性

  • display：
    • inline 將標籤設置爲內斂標籤
    • block 將標籤設置爲塊級標籤
    • inline-block 將標籤設置爲同時具備內斂標籤和塊級標籤的標籤，但不佔一行
    • none 隱藏標籤，但不佔以前的空間，與visibility:none 相比後者會繼續佔着空間

css盒子模型

padding內邊距

padding-top:10px;
padding-right:20px;
padding-bottom:10px;
padding-left:20px;
能夠簡寫爲padding:10px(上下) 20px(左右);
		padding:10px(上),20px(右),10px(下),20px(左)

margin外邊距

margin-top:10px;
margin-right:20px;
margin-bottom:10px;
margin-left:20px;
能夠簡寫爲margin:10px(上下) 20px(左右);
		margin:10px(上),20px(右),10px(下),20px(左)
#注意，當兩個標籤都設置了外邊距的話，上下邊距取最大子，左右邊距累加

float屬性

  • float:
    • right 往右飄
    • left 往左飄
.c1{
	float:right
}
注意：浮動會形成父級標籤塌陷問題
解決父級塌陷的方法：1.父級標籤設置高度
				2.父級標籤下一級標籤設置clear:both屬性
				3.父級標籤加上以下僞元素選擇器
				clearfix:after{
				content:'';
				display:block;
				clear:both;
				}

overflow溢出屬性

  • overfloat:
    • visible 默認值，內容溢出不會裁剪，會呈如今文本框以外
    • hidden 內容會被修建，超出內容不可見
    • scroll 內容會被裁剪，但超出文本框的內容會以滾動條的形式加以查看
    • auto 若是內容被裁剪，超出文本框的內容能以滾動條的形式加以查看，多使用這種
#圓形頭像實例
<head>
    <meta charset="UTF-8">
    <title>圓形頭像實例</title>
    <style>
        .c1{
            height:100px;
            width:100px;
            border:2px solid pink;
            border-radius: 50%;
            overflow: hidden;
        }
        .c1 img{
            width:100%;
        }
    </style>
</head>
<body>
    <div class="c1">
       <img src="cat.jpg">
    </div>
</body>

position屬性

  • position:
    • realitive 相對定位，保留以前的標籤位置，相對於以前的標籤位置進行移動
    • absolute 絕對定位，不保留以前的標籤位置，相對於父級標籤進行移動，若是沒有父級標籤，就找祖 父級標籤body標籤
    • fixed 固定定位，相對於瀏覽器窗口進行移動，一旦肯定就會固定在瀏覽器窗口的固定位置
/*position:定位方式;
top:px距離;
bottom:px距離;
left:px距離;
right:px距離;
*/
#實例
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .c1{
            height:200px;
            width:200px;
            text-align: center;line-height: 200px;
            border:2px solid pink;
            padding: 20px;
            position: fixed;
            top: 50%; left: 50%;
            margin-top: -100px;margin-left: -100px; #注意使用這行的形式
            /*margin-bottom: 100px;margin-right: 100px;*/  #這種格式不會產生做用
        }
    </style>
</head>
<body>

    <div class="c1">
       啦啦啦
    </div>

</body>

z-index屬性

  • z-index 值決定標籤的上下關係，數值大的標籤蓋住數值小的標籤，
  • 只有定位了的標籤，纔能有z-index。無論相對定位，絕對定位，固定定位，均可以使用z-index，可是浮動元素float不能使用z-index
    • 全部通常大布局就是使用float作的，小布局就是使用position作的
  • z-index值沒有單位，就是一個正整數，默認的z-index值爲0，若是你們都沒有z-index值，或者z-index值同樣，那麼哪一個標籤寫在後面，哪一個標籤就在上面，定位了的標籤，永遠壓住沒有定位的標籤
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .c1{
            height:200px;
            width:200px;
            text-align: center;line-height: 200px;
            background-color: red;
            border:2px solid pink;
            padding: 20px;
            position: fixed;
            top: 50%; left: 50%;
            margin-top: -100px;margin-left: -100px;
            z-index: 2;
        }
        .c2{position: absolute;
            height: 600px;width: 100%;
            background-color: blue;
            z-index: 1;
        }
    </style>
</head>
<body>
    <div class="c2">

    </div>
    <div class="c1">
       啦啦啦
    </div>
</body>
</html>

opacity透明屬性

  • opacity:透明度 透明度使用0-1表示，數值越大，越不透明
  • opacity屬性用於表示整個標籤透明度，與rgba相比，rgba只是表示背景的透明度
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .c1{
            height: 300px;width: 100px;
            background-color: rgba(255,255,0,0.5);
            border: 10px solid blue;
            padding: 20px;
            margin: 20px;
            opacity: 0.3;
        }
    </style>
</head>
<body>
    <div class="c1">
       啦啦啦
    </div>
</body>
</html>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程