1. 程式人生 > >css基礎知識整理

css基礎知識整理

har href 劃過 水平對齊 round 20px eight 分享 相同

1、css分類樣式分為3類:內聯、內嵌、外部

(1)內聯:寫在標簽裏面,樣式為style=" "

舉例說明:

<div style="
width:100px;
height: 110px;
background-color: red;">
<p>
我是第一行h
</p>

運行樣圖:技術分享圖片

style="寬度為100像素,高度為110像素,背景是綠色"。給這一個div標簽定css樣式。

(2)內嵌:在<head> </head>裏面<style type="text/css"> </style>內嵌在head內部body外部*/

<head>

<style type="text/css">

<style type="text/css"> </style>

</head>

舉例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>

<style type="text/css">/*內嵌在head內部body外部*/
p{
color: red;
}/*p代表選擇全部文字*/
.lianxi
{
color: yellow;
background: red;
height: 100px;
width: 100px;
}

</style>

</head>

<body>

<div class="lianxi">我是洋洋1</div>
<div class="lianxi">我是洋洋2</div>
<div class="lianxi">我是洋洋3</div>

</body>

運行樣圖:技術分享圖片

<body></body>內部有一個class=lianxi 點class即賦予所有class等於練習的內容背景紅色,高100像素,寬100像素字體為黃色。

(3)外部,單獨建一個css文件

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

舉例說明:

<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="0809liaxi2.css"/>

</head>

也是在<head> </head>裏面

2、選擇器:class、id、復合選擇、屬性、偽類

(1)class,選擇class屬性時用點.XX,根據class的名來篩選元素,並且用class屬性選擇可以有相同的重復的名字

如:

<div class="lianxi">我是洋洋1</div>
<div class="lianxi">我是洋洋2</div>
<div class="lianxi">我是洋洋3</div>

選擇class等於lianxi時是點lianxi,這樣我是洋洋的內容就被選擇了,然後就可以給我是洋洋的內容添加屬性。

例如<style type="text/css">

.(點)lianxi

{color: yellow;

}

</style>

(2)id根據id名來篩選唯一元素,不能有相同的名字,用#加要的id名

即<div id="lianxi1">我是洋洋1</div>
<div id="lianxi2">我是洋洋2</div>
<div id="lianxi3">我是洋洋3</div>

例如#lianxi1,這樣賦予屬性時是給我是洋洋1賦予的

(3)復合中逗號表並列,空格代表後代,大於號代表全部div>p即div中所有的p元素。

舉例說明:#yang,#yang2{/*復合 後代*/
border: 2px solid black/*邊框為2,邊框顏色為黑色*/
}
div,p {
border: 2px solid red
}所有的p標簽

(4)a標簽的四個偽類:a:link未訪問的標簽、a:visited已訪問的標簽、a:active以選中的標簽、a:hover鼠標劃過時

舉例:

a:link{
color:blue;
}<--未訪問時是藍色-->
a:visited{
color:black;
} <--訪問過的是黑色-->
a:active{
color:yellow;
}<---選中是黃色->
a:hover{
color:#FF0000;
}<--鼠標劃過顯示紅色-->

效果圖:技術分享圖片

4、樣式:背景、字體、對齊方式、邊界邊框、顯示隱藏、列表(無序、有序)、格式布局

(1)背景background \

background-image:url(foot-bg.jpg);背景圖片

background-color背景顏色

background-reapet圖片平鋪方式:background-size(背景尺寸): 100% 100%;完全展開

background-position背景位置

(2)字體

fonf-family字體樣式

font-size字體大小

font-style:italic字體傾斜

font-wight字體粗細

text-decoration:(1)underline下劃線(2)overline上劃線(3)line-through刪除線(4)none去掉線

(3)對齊方式

text-align:center水平對齊方式

line-height行高

text-indent縮進單位像素

line-height(調節文本的垂直方式,通過設置行高的大小)與vertical-align(調節行內元素的垂直對齊方式)

(4)邊界邊框margin外邊距與padding內邊距(bored1px solid red代表粗細與顏色)

margin上右下左只能調節左右margin-left與margin-right

padding加了內邊距元素會變大,

背景、字體、對齊、邊框舉例:技術分享圖片

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #name{
                background-color: red;/*背景為紅色*/
                height: 90px;
                width: 200px;
                margin-left: 60px;/*w外邊距距邊框60px*/
                padding-top: 90px;/*內邊距距上邊90px*/
                font-size: 20px;/*字體大小*/
                font-style: initial;/*傾斜*/
                /*text-decoration: underline;下劃線*/
                text-decoration: overline;/*上劃線*/
                color: yellow;/*字體顏色*/    
                border:10px solid:blue;
                float:left
            }
            .class{
                background-color: green;/*背景為紅色*/
                height: 150px;
                width: 400px;
                /*vertical-align: bottom;*調節input、span、img的行內元素垂直對齊方式/
                 * 
                 */
                line-height: 140px;
                margin-left: 40px;
            }
        </style>
    </head>
    <body>
        <div id="name">
            無限歌謠季 
        </div>
        <div class="class">我想和你唱</div>
    </body>
</html>

css基礎知識整理