css的選擇器和常用屬性

• ​​css的使用​​

• ​​1.行内式​​
• ​​2.嵌入式​​
• ​​3.引入外來樣式檔案​​

• ​​css選擇器​​

• ​​通用選擇器​​
• ​​元素選擇器​​
• ​​id選擇器​​
• ​​類選擇器​​
• ​​分組選擇器​​

• ​​組合選擇器​​

• ​​後代選擇器​​
• ​​子元素選擇器​​
• ​​相鄰兄弟選擇器​​
• ​​普通兄弟選擇器​​

• ​​css常用屬性設定​​

• ​​背景​​
• ​​文本​​
• ​​字型​​
• ​​display​​
• ​​浮動​​
• ​​盒子模型​​

• ​​border​​
• ​​padding​​
• ​​margin​​

css的使用

1.行内式

行内樣式将樣式定義在html元素的style屬性中，以行内式寫的css耦合度高，隻适用于目前元素，在設定某個元素

的樣式比較常用

<p style="color:red; font-size:50px;">
    這是一段文本
p>      

2.嵌入式

嵌入式通過在html頁面内容開辟一段屬于css的代碼區域通常都是在标簽嵌套

在

<style type="text/css">p{color:blue;font-size:40px;}style>      

3.引入外來樣式檔案

在實際開發當中，很多時候都使用引入外聯樣式檔案，這種形式可以使html頁面更加清晰

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

css選擇器

通用選擇器

*{
    color：orange；
}
*号代表是選擇所有      

元素選擇器

又叫标簽選擇器

p{
  font-size:15px;
}      

id選擇器

<p id="first">段落一p>      

#first{
    color:red;
}      

類選擇器

<p class="first">段落一p>      

.first{
    color:red;
}      

分組選擇器

選擇指定選擇器選中的元素，通常是在多個标簽中設定相同的樣式

<div class="first">
    盒子一
div>
<p>
    段落一
p>
<div id="second">
    盒子2
div>      

.first , p , #second{
  background-color:blue;
}      

組合選擇器

後代選擇器

用于選擇指定标簽元素下的後背，以空格分開

選擇器1 選擇器2{
  ......
}      

<ul class="fruit">
    <li>香蕉li>
    <li>蘋果li>
    <li>檸檬li>
ul>      

.fruit li{border:1px solid red;}      

子元素選擇器

選擇指定元素的第一代元素，用大于号分隔

選擇器1 > 選擇器2{
  .......
}      

#father > div{
    border:1px solid red;
}      

相鄰兄弟選擇器

可選擇在另一進制素後的元素，且二者有相同的父元素，以加号分隔

選擇器1 + 選擇器2{
  .....
}      

<div id="d">
    相鄰兄弟選擇器1
    <ul>
        <li>紙li>
        <li>筆li>
    ul>
div>
<div>
    相鄰兄弟選擇器2
div>      

#d + div{
    border:1px solid red;
}      

普通兄弟選擇器

選擇緊接在另一個元素後的所有元素，而且二者有相同的父元素，以波浪号分隔

選擇器1 + 選擇器2{
  .......
}      

<div>
    普通兄弟選擇器1
    <ul>
        <li>張三li>
        <li>劉四li>
        <li>王五li>
        <li>李六li>
        <li>阿七li>
    ul>
div>      

li~li{
    background-color:yellow;
}      

css常用屬性設定

背景

css背景用于定義HTML元素的背景效果

1.設定元素的背景顔色
body{
    background-color:#ff0000;
}      

2.設定元素的背景圖像,預設情況下會進行重複顯示，覆寫整個元素實體
body{
    backdround-image:url('paper.gif');
}      

3.設定是否重複背景圖像
body{
    background-image:url(img/logo.jpg);
    background-repeat:no-repeat;
}      

4.設定背景圖檔大小
body{
    background-size:200px 200px;
}      

文本

1.設定元素顔色
body{
    color:blue;
}
h1{
    color:#00ff00;
}
h2{
    color:rgp(255,0,0);
}      

2.設定文本對齊方式，center（居中），left（左對齊），right（右對齊）
body{
    text-align:center;
}
h1{
    text-align:right:
}
h2{
    text-align:left:
}      

3.設定文本修飾
div{
    /*設定文本上劃線*/
    text-decoration:overline;
    /*設定下劃線*/
    text-decoration:underline;
    /*設定中劃線*/
    text-decoration:line-through;
}
h2{
    /*同時設定元素的上中下劃線*/
    text-decoration:overline underline line-through;
}
a{
    /*去除文本修飾*/
    text-decoration:none;
}
p{
    /*設定首行縮進,em:一個文字的寬度*/
    text-indent:2em;
}      

字型

1.設定文本字型
1.1. 設定當字型名中含有空格或#、$之類的符号 時，才需要在font-family聲明中加引号
body{
    font-family:"arial black";
}
1.2. 多個字型系列是用一個逗号分隔指明
/*靠前的字型先生效*/
p{
    font-family:微軟雅黑,黑體，"agency fb";
}      

2.設定文本大小
body{
    font-size:30px;
}      

3.設定字型風格
body{
    /*設定風格正常體*/
    font-style:normal;
    /*斜體*/
    font-style:italic;
    /*強制傾斜*/
    font-style:oblique;
}      

4.設定字型的粗細
body{
    font-weigth:bold;
    /*100-900值越大字型越粗，400正常字型，700粗體*/
}      

display

規定元素生成框的類型

類型	描述
block	元素會被顯示，且元素會變成塊級元素，元素前後會有換行符
none	元素會被隐藏
inline	元素會顯示為行内元素，元素前後沒有換行符
inline-block	行内塊級元素

塊級元素：可以設定元素的寬高和邊距，元素會自動換行

行内元素：不可以設定元素的寬高和邊距，元素不會自動換行

行内塊級元素：可以設定元素的寬高和邊距，元素不會自動換行

浮動

float的屬性值有none,left,right.

1.隻有橫向浮動，并沒有縱向浮動

2.會将元素的display屬性變更為block。、

3.浮動元素的最後一個元素會圍繞着浮動元素（典型運用就是文字圍繞圖檔）

4.浮動元素的前一個元素不會受到任何影響（如果想讓兩個塊級元素并排顯示，必須讓

兩個塊級元素都應用float）。

盒子模型

border、padding、margin三個屬性構成盒子模型

border

設定所有的邊框屬性

1.可同時設定邊框的寬度、樣式、顔色

table,th,td{
    border:1px solid black;
}
table{
    width:100%;
    height:50px;
}      

2.使用border-width、border-style、border-color單獨設定

table,td{
    border-width:1px;
    border-style:dotted;
    border-color:green;
}      

3.設定表格邊框是否折疊為單一邊框

屬性值：separate（預設，單元邊框獨立）collapse（單元格bian’kuang 合并）

4.設定屬性的順序，上右下左

設定一個屬性，表示邊框四邊效果一樣

設定兩個屬性，表示上下一緻，左右一緻

設定三個屬性，表示上右下不一緻，左右一緻

padding

設定元素所有内邊距的寬度，或者設定各邊上内邊距的寬度

如果在表的内容控制文本邊框的内邊距，使用td和th填充屬性

td{
    padding:15px;
}      

單獨設定各邊的内邊距：padding-top、padding-left、padding-botton、padding-right

margin

設定一個元素所有外邊距的寬度，或者各邊上外邊距的寬度

p{
    margin:2px 3px 5px 6px;
}      

單獨設定各邊的外邊距：margin-top、margin-left、margin-botton、margin-right

p{
    margin-top:100px;
    margin-left:200px;
    margin-botton:50px;
    margin-right:50px;
}
*{
    margin:auto auto;
}
*{
    margin:100px auto;
}      

說明：

auto：自動，可以了解為居中的意思，浏覽器自動計算外邊距

margin：auto auto：第一個auto表示上下外邊距自動計算，第二個auto表示左右外邊距自動計算。

但是上下外邊距在自動計算時不會自動生效，而左右外邊距會生效，表現為居中狀态

設定一個元素所有外邊距的寬度，或者各邊上外邊距的寬度

p{
    margin:2px 3px 5px 6px;
}      

單獨設定各邊的外邊距：margin-top、margin-left、margin-botton、margin-right

p{
    margin-top:100px;
    margin-left:200px;
    margin-botton:50px;
    margin-right:50px;
}
*{
    margin:auto auto;
}
*{
    margin:100px auto;
}      

說明：

auto：自動，可以了解為居中的意思，浏覽器自動計算外邊距