css基本語法（一）——選擇器字體背景超鏈接樣式邊框

css
層疊樣式表
主要功能
1.佈局定位
2.美化頁面

註釋：/* */

按書寫的位置分爲三大類
1.內嵌樣式表

<html>
    <head>
    ..............
    </head>
    <body>
    </body>
</html>

<style type="text/css">
			li{color: red;}
</style>

2.外部樣式表（用的比較多）
單獨寫在文件中，文件.css ： p{color: blue;}
關聯方法1（鏈接外部樣式表）：

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

關聯方法2（導入外部樣式表）：

<style type="text/css">
			@import url("css/style.css");
</style>

3.行內樣式表

<p style=""></p>
<div style="width: 400px;height: 200px;border: 1px solid red;">hello div</div>

選擇器

1.簡單選擇器
語法：
選擇器{屬性：屬性值；屬性：屬性值；…}
1.1.標籤選擇器

  li{color:red;}

1.2.類選擇器

  .redtext{color: red;}
<li class="redtext">xxx</li>

當在一個class設置兩個類，兩個類是同一個屬性時，以後出現的爲準

<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.p{color: red;}
			.p2{color: blue;}
		</style>
	</head>
	<body>
		<p class="p p2">bbbbbbbbbbbbbbbbb</p>
	</body>

1.3.id選擇器

  #myli{color: green;}
  <li id="myli">xxx</li>

類選擇器是允許多次使用的，而id樣式原則上只用一次，用多次會影響腳本
優先級：
id>類>便籤

2.複合選擇器
2.1.交集選擇器
兩個選擇器之間沒有任何分割

p.buletxt{color: blue;}

只能用在段落

<p class="buletxt">aaaaaaaaaaaa</p>

2.並集選擇器

p,div{color: red;}

3.後代選擇器

div p{color: red;}

字體

設置字體
如果第一種找不到，就找第二種，如果兩種都找不到，就顯示系統默認的

<style type="text/css">
	p{font-family: 微軟雅黑,楷體;}
</style>

如果字體有空格，要使用單引號引起來

設置字號

p{font-family: 微軟雅黑,楷體;font-size: 50px;}

相對大小
em
默認大小

font-size: 1em;

默認大小的1.5倍

font-size: 1.5em;

pt也可以

斜體

font-style: italic;

加粗

font-weight: bold;

加粗程度的值爲100-900

font-weight: 900;

下劃線

text-decoration-line: underline;

去掉超鏈接中的下劃線

<a href="http://www.baidu.com">百度一下</a>
a{text-decoration: none;}

上劃線

text-decoration-line: overline;

貫穿線

text-decoration-line: line-through;

線型：
text-decoration-style:
solid實線
dashed虛線
dotted點狀線條
wavy波浪線
線的顏色：
text-decoration-color:

字體顏色

.p2{color: blue;
	color: rgb(255,0,0);
	color:rgba(255,0,0,0.5)}

其中0.5表示透明度，取值在0-1之間

font簡寫
順序：

font：[ [ <' font-style '> || <' font-variant '> || <' font-weight '> ]? <' font-size '> [ / <' line-height '> ]? <' font-family '> ] | caption | icon | menu | message-box | small-caption | status-bar

值最少兩個

陰影
text-shadow
向右下方偏移：

text-shadow: 10px 10px 5px red;

第三個值爲模糊程度

對齊方式
水平對齊

text-align: center;

垂直對齊

td{vertical-align: top};

適用於：內聯及 table-cell 元素

單詞的間距

word-spacing: 20px;

字符間距

letter-spacing: 10px;

縮進距離

text-indent: 100px;

行高

line-height: 100px;

表示字體的高度加上上下空白的總高度
在定義字體大小的時候可以同時定義行高

font: 50px/120px"微軟雅黑";

"/"前面表示字號，後面表示行高

背景

顏色背景

p{background-color: red;}

圖片背景

p{background-image: url(img/key.jpg);}

圖片背景平鋪

background-repeat: repeat;

圖片背景大小

background-size: auto
background-size: 400px 400px;（可以設置跟邊框的大小一樣）
background-size: 100% 100%

圖片背景位置偏移

background-position: 100px 100px;（水平方向和垂直方向）
background-position:left top; 
background-position: right top;
background-position: right buttom;
background-position: center center;

簡寫
不像font那樣要求順序

background: url(img/key.jpg) no-repeat -100px -150px;

改變背景圖片顯示的起點位置

background-origin: border-box;
background-origin: content-box;
background-origin: padding-box;

背景裁剪
從border區域開始向外裁剪背景

background-clip: border-box;

從文字向外開始裁剪

background-clip: text;

把文字設置爲透明

color: transparent;

設置邊框透明度

border: 50px dashed rgba(0,0,255,0.2);

部分瀏覽器不支持裁剪，可以針對瀏覽器的內核，給它一個特殊的樣式

background-clip: -webkit-text;

超鏈接樣式

/*未點擊過的超鏈接的樣式*/
a:link{color: blue;text-decoration: none;font:50px "微軟雅黑";}
/*點擊過的超鏈接的樣式*/
a:visited{border: 1px solid red;}
/*懸停在超鏈接上的樣式*/
a:hover{text-shadow: 5px 5px 5px yellow;}
/*正在點擊的超鏈接上的樣式*/
a:active{text-decoration:blue double underline;}

鼠標懸停樣式

 <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			a{color: black;text-decoration: none;}
    			a.a1:hover{color: red;background: black;}
    			a.a2:hover{color: blue;background: black;}
    		</style>
    	</head>
    	<body>
    		<ul>
    			<li><a class="a1" href="http://www.baidu.com">百度</a></li>
    			<li><a class="a2" href="http://www.jd.com">京東</a></li>
    		</ul>
    	</body>
    </html>

邊框

border
設置對象邊框的特性
<line-width>：設置或檢索對象邊框寬度。
<line-style>：設置或檢索對象邊框樣式。
<color>：設置或檢索對象邊框顏色。
border-left:設置對象左邊邊框的特性
border-right:設置對象左右邊邊框的特性

{width: 400px;height: 200px;border: 5px solid blue;}

box-shadow
設置或檢索對象陰影
<length>①：第1個長度值用來設置對象的陰影水平偏移值。可以爲負值
<length>②：第2個長度值用來設置對象的陰影垂直偏移值。可以爲負值
<length>③：如果提供了第3個長度值則用來設置對象的陰影模糊值。不允許負值
<length>④：如果提供了第4個長度值則用來設置對象的陰影外延值。可以爲負值
<color>：設置對象的陰影的顏色。

box-shadow: 5px 5px 5px 10px rgba(0, 0, 0, .6);

border-radius
設置或檢索對象使用圓角邊框
只給左上角和右上角圓角

border-radius:20px 20px 0px 0px

四邊都加圓角

border-radius:20px

一般用於表單

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		.input{width: 300px;height: 25px;border: 1px solid #ccc;border-radius: 5px;}
		</style>
	</head>
	<body>
		<form>
			用戶名：<input type="text" name="username" class="input"/>
		</form>
	</body>
</html>

css基本語法（一）——選擇器字體背景超鏈接樣式邊框

選擇器

字體

背景

超鏈接樣式

邊框

MySQL 核心模塊揭祕 | 18 期 | 鎖在內存里長什麼樣*

使用perf工具生成火焰圖

HttpSecurity 是如何組裝過濾器鏈的

數說海南——近6年海南各市縣人口簡單看

長序列中Transformers的高級注意力機制總結

大齡程序員思考

響應式界面控件DevExtreme * 更強的數據分析和可視化功能

java XStream實現XML和數據類之間互相轉換

java高級——線程

java jdk1.5的新特性——泛型 ForEach 枚舉可變參數靜態導入線程併發庫內省

oracle數據庫基本語法——表的約束修改表結構數據的增刪改查表的權限表空間

css基本語法（二）——表格列表邊距尺寸浮動和清除

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

css基本語法（一）——選擇器 字體 背景 超鏈接樣式 邊框

選擇器

字體

背景

超鏈接樣式

邊框

css基本語法（一）——選擇器字體背景超鏈接樣式邊框