關于CSS的簡單總結-有解無憂

在這里插入圖片描述

1.引入方式
(1)內嵌式引入
把style標簽嵌套在head標簽中，

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css"></style>
</head>
<body>
	
</body>
</html>

其中CSS就嵌入在title下面的style里面，
(2)外鏈樣式
把css當成是一個檔案，通過link標簽引入到html中，

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="">
</head>
<body>
	
</body>
</html>

title下面的link里的href=""里面填寫CSS的路徑（CSS需要重新建立一個檔案，我們需要寫的CSS就在這個檔案里面寫，這樣你想呼叫就可以不用重新寫了），
2.選擇符
CSS 規則由兩個主要的部分構成：選擇器，以及一潭訓多條宣告，選擇器通常是您需要改變樣式的 HTML 元素，每條宣告由一個屬性和一個值組成，屬性（property）是您希望設定的樣式屬性（style attribute），每個屬性有一個值，屬性和值被冒號分開，如果要定義不止一個宣告，則需要用分號將每個宣告分開，
(1)標簽選擇符
通過標簽的名字來命名的，
代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
    body{
    	color: red;
    }
	</style>
</head>
<body>
	Hello,world.
</body>
</html>

顯示效果如下：
在這里插入圖片描述 (2)id選擇器
當標簽中出現id屬性的那么可以使用id選擇器，
Id選擇器通常應用于某些標簽中獨有的樣式，
代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
    p{
    	color: red;
    }
    #one{
    	color: blue;
    }
	</style>
</head>
<body>
    <p>你好，世界，</p>
	<div id="one">Hello,world.</div>
</body>
</html>

效果：
在這里插入圖片描述 id選擇器前面需要加上"#"才會生效，
(3)類選擇器
當標簽中出現class屬性的時候那么可以使用類選擇器，
類選擇器通常應用于某幾個標簽具有相同的樣式，

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
    .one{
    	color: orange;
    }
	</style>
</head>
<body>
    <p class="one">你好，世界，</p>
</body>
</html>

在這里插入圖片描述要注意的是此選擇器也是前面要加上"."才會生效，
(4)全選擇器
使用*號來表示對整個html中的所有標簽都起作用

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
    p{
    	color: red;
    }
    #one{
    	color: blue;
    }
    *{
    	font-size:36px;
    }
	</style>
</head>
<body>
    <p>你好，世界，</p>
	<div id="one">Hello,world.</div>
</body>
</html>

效果可以跟id選擇器的效果圖比較：
在這里插入圖片描述 (5)分組選擇符
多個選擇符同時具備同一種樣式使用分組選擇符，

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
    p{
    	color: red;
    }
    #one{
    	color: blue;
    }
    h1{
    	font-size: 40px;
    	color: green;
    }
    p,h1,div{
    	margin-top: 100px;
    	padding-left: 200px;
    }
	</style>
</head>
<body>
    <p>你好，世界，</p>
	<div id="one">Hello,world.</div>
	<h1>Hello,world.</h1>
</body>
</html>

在這里插入圖片描述注意：各個選擇符之間要用逗號（，）鏈接，
(6)組合選擇符
把前面幾種選擇符綜合的使用在一起，
3.控制html中的字體
(1)大小
用“font-size：；”表示，前面已經展示過，
(2)顏色
用“color: ;”表示，前面也有，
(3)字體
用“font-family”表示，

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
    #one{
    	font-family: 楷體;
    	font-size: 36px;
    }
	</style>
</head>
<body>
	<div id="one">Hello,world.</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
    #one{
    	font-family: 宋體;
    	font-size: 36px;
    }
	</style>
</head>
<body>  
	<div id="one">Hello,world.</div>
</body>
</html>

效果如下：
楷體：
在這里插入圖片描述
宋體：
(4)行高
用“line-height: ;”表示，使用方法與上面一致，
(5)粗細
設定字體的粗細 font-weight：normal（正常）bold（粗體），

注意：
在使用單位時，px 和em比較常用建議大家經常使用百分比,適合做螢屏適配，
4.特點
(1)繼承
網頁中子元素，將繼承父元素的樣式
例如：要控制段落p中的文字大小，可以直接給body標記加樣式，
(2)層疊
網頁中子元素定義了與父元素相同的樣式，則子元素的樣式將覆寫掉父元素的樣式，后面定義的樣式，會覆寫前面定義的樣式，
5.常用的html中控制的文本
(1)文本縮進
用“text-ident: ;”表示，
我們根據上面的代碼進行修改，
代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
    #one{
    	font-family: 宋體;
    	font-size: 36px;
    	text-indent:2em;
    }
    p{
        font-size: 40px;
        color: green;
        font-family: 宋體;
    }
	</style>
</head>
<body>  
	<div id="one">Hello,world.</div>
	<p>你好，世界</p>
</body>
</html>

效果是這樣的：
在這里插入圖片描述
很明顯的看到，“Hello，world.”因為設定了“text-indent:2em;”前面空了兩格，
(2)對齊方式
文本水平對齊方式 text-align：left[左]center[中]right[右]；，怎么敲跟上面的一樣就不再多說，
6.偽類
(1)未訪問的鏈接
a:link{ }
(2)已訪問的鏈接
a:visited{ }
(3)滑鼠移動在鏈接上
a:hover{ }
(4)滑鼠按到鏈接上
a:active{ }
在html中要敲出a標簽，
7.盒子模型
在布局是經常用到，
內邊距 padding 用于填充內容內部，
外邊距 margin 用于描述瀏覽器邊緣到內容的之間的距離，
邊框 border：1px solid black，
Margin：100px 上下左右都是100px的距離，
Margin：100px 200px；上下100px、左右 200px，
Margin：100px 200px 300px 上100px 左右 200px 下300px，
Margin：100px 200px 300px 400px 上、右、下、左，
Margin-top margin-left margin-right margin-bottom 邊框也適用于4個方向，
在這里插入圖片描述
例：
上代碼：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
    #one{
    	border: 2px solid orange;
        width: 100px;
        height: 200px;
        margin-left:100px;
        margin-top: 300px; 
    }
    p{
        font-size: 36px;

    }
	</style>
</head>
<body>  
    <P>你好，世界</P>
	<div id="one">小盒子</div>
</body>
</html>

效果如下：
在這里插入圖片描述小盒子那里就是所謂的盒子，我們可以通過上面我們講的調整他的位置、邊框顏色、邊框粗細等等，
8.塊狀元素和行內元素
(1)塊狀元素
具有高度和寬度的屬性，但是它不允許其他元素和它同行顯示，
代表標簽：div p 等等，
默認屬性： display:block;，
(2)行內元素
不具有寬度和高度的屬性，允許其他元素與其同行顯示，
代表標簽：a span，
行內元素的默認屬性 display:inline;，
9.控制背景
(1)背景顏色
background-color：；
根據上面的代碼修改

#one{
    	border: 2px solid orange;
        width: 100px;
        height: 200px;
        margin-left:100px;
        margin-top: 300px; 
        background-color: grey;
    }

效果：
在這里插入圖片描述可以看到盒子里的背景變成了灰色，
(2)背景影像
background-image：url（背景影像的位置及全稱）；，不經常使用，
(3)背景影像的重復方式
例如：
background-repeat:[repeat、no-repeat、repeat-x、repeat-y]；
意思分別是，重復，不重復，在x軸重復，在y軸上重復，
10.布局
(1)浮動布局
浮動是css實作布局的一種方式，包括div在內的任何元素都可以以浮動的方式進行顯示，
none：不浮動，
left：物件向左浮動，而后面的內容流向物件的右側，
right：物件向右浮動，而后面的內容流向物件的左側，
來看代碼：
未浮動前：
html：

<div id="one">小盒子</div>
<div id="two">大盒子</div>

css：

#one,#two{
    	border: 2px solid orange;
        width: 100px;
        height: 200px;
        margin-left:100px;
        background-color: grey;
    }

效果：
在這里插入圖片描述
由效果看來，大盒子和小盒子是上下關系，未并列，
浮動后：
代碼：
html部分不變，
css部分：

#one{
    	float:left;
    	border: 2px solid orange;
        width: 100px;
        height: 200px;
        margin-left:100px;
        background-color: grey;
    }
     #two{
    	border: 2px solid orange;
        width: 100px;
        height: 200px;
        margin-left:100px;
        background-color: grey;
        float:left;
    }

效果：
在這里插入圖片描述

大盒子和小盒子成了并列關系，
11.導航
根據實體展示來了解導航
(1)水平
html：


<ul>
  <li><a href="#home">主頁</a></li>
  <li><a href="#news">新聞</a></li>
  <li><a href="#contact">聯系</a></li>
  <li><a href="#about">關于</a></li>
</ul>

css：

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
} 
li {
    float: left;
} 
li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
/*滑鼠移動到選項上修改背景顏色 */
li a:hover {
    background-color: #111;
}

效果：
在這里插入圖片描述

(2)垂直
html：


<ul>
  <li><a href="#home">主頁</a></li>
  <li><a href="#news">新聞</a></li>
  <li><a href="#contact">聯系</a></li>
  <li><a href="#about">關于</a></li>
</ul>

css：


ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
}
li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}
/* 滑鼠移動到選項上修改背景顏色 */
li a:hover {
    background-color: #555;
    color: white;
}

效果：
在這里插入圖片描述
以上就是我的簡單總結，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/259750.html

標籤：其他

上一篇：Vue框架——自定義指令

下一篇：視頻網站網頁Demo