技術標籤：css如何調整紅心樣式

【34】

1、CSS 入門

A、為什麼學習 CSS（CSS 的作用）

【1】HTML 雖然可以在一定程度上修飾頁面，但是頁面的整體還是不夠美觀。

【2】HTML 進行網頁的書寫重複的程式碼比較多，後期的維護性不好。

B、什麼是 CSS（CSS 的概念）

英文全稱：Cascading Style Sheets

層疊樣式表（級聯樣式表）

CSS 的引入方式

CSS 的引入的三種方式

在標籤的內部直接使用（不推薦使用）

<!--1、行內式 style=“key:value;”style="font-size:
30px;color: yellow;" -->
<!--2、內嵌樣式 這個style標籤寫建議寫到head裡面，因
為這個中的內容需要展現到使用者面前的-->
<style>
/*選擇器 */
span{
/*字型的大小*/
font-size: 30px;
/*字型的顏色*/
color: red;
/*字型的樣式*/
font-family: 宋體;
}
</style>
 這個 (.css)檔案是在外部定義好的檔案直接建立csss
檔案就可以了
<!--3、連結式 rel:當前的文件和引入的文件的關係
href:是指引入文件的關係-->
<link rel="stylesheet" href="css/css.css"
/>
<!--**瞭解：這種方式也可以引入CSS的樣式，作為了解-->
<style>
@import url("css/css.css");
</style>
 

CSS 中三種引入方式遵循的就近原則 ：

不相同的樣式會進行樣式的疊加，相同的樣式會採用就近的原則。樣式跟隨距離自己近的風格

CSS 中的常用選擇器 :

標籤選擇器

p{
color: red;
}

id選擇器

id:(唯一性)

id命名：數字、字母、下劃線、中劃線（-），不能用數字開頭

 #p_1{
font-size: 30px;
color: yellowgreen;
}

class選擇器

.p_2{
font-weight: bold;
color: yellow;
}

三種選擇器的優先順序：

id 選擇器>class 選擇器>標籤選擇器

權重 100 10 1

CSS 中其他選擇器

後代選擇器 只要包含該標籤物件即可

div span{
font-size: 27px;
font-family: 宋體;
color: red;
}

子選擇器 直系子標籤

div>span{
color: red;
 }

兄弟選擇器 只會改變下面相鄰的元素物件

 #p_1+p{
 color: green;
}

兄弟選擇器 後面所有的兄弟物件都會改變

#p_1~p{
color: red;
font-size: 30px;
}

偽類選擇器

a:hover{
color: red;
}

CSS 中常用樣式總結 1

字型：（font）

 /*字型的顏色*/
color: gray;
/*字型的大小*/
font-size: 12px;
/*字型的加粗*/
/*font-weight: bold;*/
/*字型的風格*/
 /*font-family: 宋體;*/
/*字型傾斜*/
/*font-style: italic;*
文字（text）
 /*下劃線展示*/
text-decoration: underline;
 /*去除下劃線*/
text-decoration: none;
 /*文字居中*/
text-align: center;
 

border 屬性有三個修飾屬性

border-color 
border-color:red;
border-top-color:blue;
border-width 
border-width: 1px;
border-left-width: 3px;
border-style
border-style: solid
border-bottom-style: solid；
可以使用border統一設定
border: 1px solid red; 
border-right: 5px dotted blue;

CSS 常用樣式總結 2

行高

line-height: 40px; 

背景

 /*設定背景圖片*/
 background-image:
url("http://img30.360buyimg.com/da/jfs/t22399/154/7
65213112/96035/f94f9605/5b17512dN2de9d722.jpg");
/*設定背景圖片不重複*/
background-repeat: no-repeat;
/*調整背景圖片的位置 X Y*/
background-position: center;
/*調整背景圖片的大小 寬 高 */
/*background-size: 300px 500px;*/
/*背景顏色 red #f0000 rgb(255,0,0) 
rgba(255,0,0,.5){包含透明度} */
background-color: rgba(255,0,0,.5);

CSS 中常用樣式總結 3

行元素和塊元素

行內元素：（多個標籤位於同一行）

span font 小標籤 img a 等

塊元素：（標籤可以自動換行的元素是塊元素）

div h1-h6 ul p 等

其他樣式

/*調整透明度的屬性 0-1*/
opacity: 0.4;
/*超出隱藏 hidden*/
overflow: hidden;
/*行內元素轉塊級元素 inline block none(隱藏)*/
display: block;

CSS 中的定位

絕對定位:

absolute :定位離開之後釋放的之前的位置 基於外

層父級標籤來說

相對定位：

relative: 定位離開之後之前的位置沒有釋放 基於之

前的位置來說

固定定位：

fixed ：始終是基於瀏覽器的左上角定位 適合做廣告

預設定位：

static ：初始的定位的操作