css的基礎用法（上）

番茄西紅柿發布于2019-04-23 13:35 / 2578人閱讀

摘要：選擇器可以可以標簽選擇器直接在標簽里面，標簽名字就可以選擇到。內容會被修剪，并且其余內容是不可見的。規定應該從父元素繼承屬性的值。起到給加圓角的作用。代表的是上下，左右。代表的是上，右，下，左。

css定義：

　　CSS層疊式樣表（Cascading Style Sheets）是一種用來表現html或xml等文件樣式的計算機語言。CSS不僅可以靜態的修飾網頁，還可以配合各種腳本語言動態地對網頁個元素進行格式化。

　　CSS能夠對網頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網頁對象和模型樣式編輯的能力。

一、常用選擇器：

 1 <html>
 2          <head>
 3                   <meta charset="utf-8" />
 4                   <title>選擇器title>
 5                   <style>
 6                            #box1{width:150px;height:150px;background:red;}
 7                            .box2{width:200px;height:150px;border:1px solid red;}
 8                   style>
 9          head>
10          <body>
11                   <div id="box1">1div>
12                   <div class="box2">2div>
13                   <div>3div>
14          body>
15     
16 html>

id選擇器：

　　首先給標簽起名，修飾你想要修飾的那個標簽直接#id

class選擇器：

　　給標簽起個class名字，你想修飾的時候.class名字。

　　它可以寫多個class名字用空格隔開。

 1 <html>
 2          <head>
 3                   <meta charset="utf-8">
 4                   <title>選擇器title>
 5                   <style>
 6                            #box1 , .box2 , p{width:150px;height:150px;border:1px solid blue;}
 7                   style>
 8          head>
 9          <body>  
10                    <div id="box1">1div>
11                    <div class="box2">2div>
12                    <p>可以可以p>
13          body>
14 html>

標簽選擇器：

　　直接在style標簽里面，

　　標簽名字就可以選擇到。

組合選擇器：

　　#id，.class名字，標簽名字{}

 1 <html>
 2          <head>
 3                   <meta charset="utf-8" />
 4                   <title>選擇器title>
 5                   <style>
 6                            .xx .cc p{width:120px;height:120px;border:1px solid yellow;}
 7                   style>
 8          head>
 9          <body>
10                   <div class="xx">
11                           <div class="cc">
12                                   <p>這里p>
13                           div>
14                   div>
15          body>
16 html>

層級選擇器：

　　一層一層往下找，#box div

 1 <html>
 2          <head>
 3                    <meta charset="utf-8" />
 4                    <title>選擇器title>
 5                    <style>
 6                             a:link{color:red;}
 7                             a:visited{color:blue;}
 8                             a:active{color:yellow;}
 9                             a:hover{color:pink;}
10                    style>
11          head>
12          <body>
13                    <a href="http://www.baidu.com">百度一下a>
14          body>
15 html>

偽類選擇器：

　　a:link //鏈接的時候默認的字體顏色；

a:visited //訪問過后的顏色;

　　a:active //當你鼠標點擊的時候顯示的顏色；

　　a:hover //鼠標懸停上面的時候，就是說鼠標移入的時候。

二、常用屬性：

 1 <html>
 2          <head>  
 3                    <meta charset="utf-8" />
 4                    <title>常用元素title>
 5                    <style>
 6                             div{width:300px;height:300px;background:blue;text- 
 7                             align:center;line-height:300px;overflow:hidden;border- 
 8                             radius:50%;}
 9                             .p{font-size:20px;font-weight:bolk;}
10                              b{font-weight:normal;color:red;font-family:楷體；}
11                              li{list-style:none}
12                              a{text-decoration:line-through;}
13                              body{background:url(bjqs.jpg) repeat-y;}
14                    style>
15          head>
16          <body>
17                   <a href="http://www.baidu.com">百度一下a>
18                   <div>
19                          今天多云！今天多云！今天多云！今天多云！今天多云！
20                   div>
21                   <p class="p">看這看這p>
22                   <b>c羅牛逼b>
23                   <ul>
24                         <li>世界杯a組li>
25                         <li>世界杯b組li>
26                   ul>
27          body>
28 html>

px:像素

font-family：字體名稱

font-size：字體大小

font-style：字體的樣式（如斜體）

font-variant：字體的變化（如大寫）

font-weight：字體粗細

color：設置文本顏色

text-decoration：文本的修飾

　　　1、none 默認值，沒有裝飾效果

　　　2、underline 加一條下劃線　　

　　　3、overline 加一條上劃線

　　　4、line-through 加刪除線

text-shadow：設置字體的陰影，如：text-shadow:-5px 3px black 定義一個黑色的陰影顏色，其水平方向左移5px，垂直方向上移3px。

direction：表示文本的方向，ltr：自左至右， rtl：自又至左

text-align：文本對齊方式。 left：左對齊， right：右對齊， center：居中，justify：兩端對齊

lineheight：可以設置文本的垂直的位置用px進行設置。

vertical-align：文本垂直對齊方式。top：靠上對齊，bottom：靠下對齊，middle：垂直居中對齊

overflow：屬性規定當內容溢出元素框時發生的事情。可能的值：

　　1、visible：默認值，內容不會被修改，會呈現在元素框之外。

　　2、hidden：內容會被修剪，并且其余內容是不可見的。

　　3、scroll：內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。

　　4、auto：如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余內容。

　　5、inherit：規定應該從父元素繼承overflow屬性的值。

border-radius：起到給div加圓角的作用。當border-radius的值等于或大于50%的時候，就變成了一個圓形。

text-indent：文本縮進方式。

　　1、letter-spacing：字符之間的間距

　　2、word-spacing：字的間距

line-height：設置行高，實際上是調整行間距。

3、盒子模型：

 1 <html>
 2          <head>
 3                  <meta charset="utf-8" />
 4                  <title>盒子模型title>
 5                  <style>
 6                           div{width:200px;opacity:0.5;
 7                                height:200px;
 8                                background:black;
 9                                 margin:5px 6px 7px 8px;
10                                 padding:5px 6px 7px 8px;}
11                  style>
12          head>
13          <body>
14                   <div>div>
15          body>
16 html>

opacity:透明度。

margin：外邊界。maigin-left 外左邊界，margin-right 外右邊界，margin-top 外上邊界，margin-bottom 外下邊界。

padding：內邊界。padding-left 內左邊界，padding-right 內右邊界，padding-top 內上邊界，padding-bottom 內下邊界。

margin：0 auto 上下為零，左右居中。

margin：5px 代表的是四邊。

margin：5px 6px 代表的是上下5px，左右6px。

margin：5px 6px 7px 代表的是上5px，左右6px，下7px。

margin：5px 6px 7px 8px 代表的是上5px，右6px，下7px，左8px。

padding與margin類似。

4、浮動、標簽類型轉換：

 1 <html>
 2          <head>
 3                   <meta charset="utf-8" />
 4                   <title>標簽類型轉換title>
 5                   <style>
 6                            div{display:inline-                   
 7                                 block;width:20px;height:20px;background:red}
 8                            span{display:block;
 9                            width:50px;height:60px;background:yellow;}
10 
11                   style>
12          head>
13          <body>
14                    <div>類性轉換div>
15                    <div>不能類型轉換div>
16                    <span>這是一個行內標簽span>
17          body>
18 html>

display:inline 轉換成行內。

display:block 轉換成快。

display:inline-block;

display:none 不顯示。

 1 <html>
 2          <head>
 3                   <meta charset="utf-8" />
 4                   <title>浮動title>
 5                   <style>
 6                            /*.father{overflow:hidden;}*/
 7                            .i{clear:both;}
 8                            .clearFix:after{display:block;content:;clear:both;zoom:1;}
 9                            .xx{width:200px;height:50px;background:red;float:left;}
10                            .cc{width:200px;height:50px;background:red;float:right;}
11                   style>
12          head>
13          <body>
14                    <div class="father clearFix">
15                           <div class="xx">世界杯div>
16                           <i>i>
17                           <div class="cc">奧運會div>
18                    div>
19          body>
20 html>

浮動：

　　作用：放在一行。特點：1、元素變成快。2、頂對齊。

　　加浮動就要給清浮動。

清除浮動的方式：

　　1、給父級加overflow:hidden;

　　2、給你需要清除浮動的元素的下面加上一個空白的塊標簽給你的空白的標簽加上clear:both.

　　3、.clearFix:after{display:block;content:;clear;both;zoom:1;}

　　使用：把clearFix加在你清除的標簽注意是類名 class="clearFix".

GPU云服務器云服務器 php中css的用法 css基礎基礎css css基礎教程

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/2072.html

補習前端（css+html）基礎-1：

摘要：標簽將表單內容的一部分打包，生成一組相關表單的字段。提示和注釋注釋元素是空元素，它僅包含屬性。注釋此元素只能存在于部分，不過它可出現任何次數。屬性屬性規定當前文檔與被鏈接文檔之間的關系。該標簽用于組合表格的主體內容。 1.HTML 標簽: 實例組合表單中的相關元素： health information height: weight: 定義和用法 fieldset 元素...

marek 2019-08-29 15:24 評論0 收藏0
補習前端（css+html）基礎-1：

摘要：標簽將表單內容的一部分打包，生成一組相關表單的字段。提示和注釋注釋元素是空元素，它僅包含屬性。注釋此元素只能存在于部分，不過它可出現任何次數。屬性屬性規定當前文檔與被鏈接文檔之間的關系。該標簽用于組合表格的主體內容。 1.HTML 標簽: 實例組合表單中的相關元素： health information height: weight: 定義和用法 fieldset 元素...

douzifly 2019-08-02 10:26 評論0 收藏0
SVG基礎教程(超級詳細)

摘要：光滑三次貝塞爾曲線指令跟在指令或指令后面補刀，它會自動在基礎上生成一個對稱點，所以指令只需要兩個點就可以。二次貝塞爾曲線是控制點，表示的是曲線的終點。一、內置圖形: rect(矩形) circle(圓) ellipse(橢圓) line(直線) polyline(折線) polygon(多邊形) path(路徑) 二、內置圖形的html屬性或(css樣...

張憲坤 2019-08-21 17:42 評論0 收藏0
CSS基礎篇-- :before && :after的用法，偽類和偽元素的區別

摘要：一的用法如同對偽元素的名稱一樣，是用來給指定的元素的內容前面插入新的內容。二偽類和偽元素的區別偽類種類偽元素種類偽類作用對象是整個元素例如盡管這些條件不是基于的，但結果每一個都是作用于一個完整的元素，比如整個鏈接，段落，等等。一：:before && :after的用法 :before 如同對偽元素的名稱一樣，:before 是用來給指定的元素的內容前面插入新的內容。舉例說明： .b...

X_AirDu 2019-08-28 18:15 評論0 收藏0
[ 學習路線 ] 學完這些去阿里！GOGOGO

摘要：以下知識點是前輩師兄總結基礎語義化標簽引進了一些新的標簽，特別注意等，注意的標題結構理解瀏覽器解析的過程，理解的樹形結構，及相應理解標簽在各個瀏覽器上的默認樣式代理樣式，理解中的重置樣式表的概念理解等功能性標簽理解標簽，理解文件提交過程推薦以下知識點是前輩師兄總結 1、HTML/HTML5基礎： 1.0、語義化H5標簽1.1、H5引進了一些新的標簽，特別注意article...

zhaochunqi 2019-08-28 18:06 評論0 收藏0