選擇器

css選擇器有五種

選擇器是一種選擇方式袖牙，選中想要的元素的方式，叫選擇器舅锄，有很多選擇器鞭达，但是目的都一樣

元素選擇器，ID選擇器皇忿，Class選擇器畴蹭，后代選擇器，群組選擇器

元素選擇器

div{width:100px; height:100px}? ?寬100鳍烁，高100

id選擇器

我們可以為元素設(shè)置一個ID屬性叨襟，然后選擇器調(diào)用這個設(shè)置的ID

#box{width:100px; height:100px}? ?ID選擇器前面要加#

class選擇器

也就是類選擇器，對象同或者不同的元素定義相同的類屬性幔荒，然后一起操作

.box{width:100px;height:100px}? ?類選擇器前面要加.(點)

后代選擇器

選擇所有元素內(nèi)部中的某一種元素

h3,div{width:100px;height:100px}?選擇div里的h3

群組選擇器

同時操作許多元素

div,p,span{width:100px;height:100px;}

字體樣式簡介

font-family :字體1? ? ? 字體類型

font-size :? 100px? ? ? ?字體大小

font-weight : 100px? ? 字體粗細

font-style :? ? ? ? ? ?(normal正常糊闽，italic斜體,oblique斜體)字體風(fēng)格

color? :red?或者像素值 ? ? ? ? ? ? ?字體顏色

文本樣式簡介

text-indent:像素值；文本首行縮進

text-align:取值? ? ? ?(left,center,right)水平對齊

text-decoration:取值;? ? ?(none,去除所有劃線效果爹梁，under line,下劃線,line-through,中劃線,overline,上劃線)

border-bottom;none(去除下面的線右犹，其他方向同理)??

dashed? 虛線

text-transform:取值;? ? ? ?(none,無轉(zhuǎn)換,uppercase,轉(zhuǎn)換為大寫,lowercase,轉(zhuǎn)換為小寫,capitalize,只講單詞首字母轉(zhuǎn)換為大寫)

line-height:像素值;? 行高

letter-spacing:100px? 調(diào)整字之間的距離

word-spacing:100px? ?調(diào)整單詞之間的距離(英文)

整體樣式

border-width: 10px? ? 邊框的寬度

border-style : solid? ? 邊框的外觀

border-color : red? ?邊框顏色

可以簡寫

border:10px solid red;

列表項符號

list-style-type:None;? ?去除列表項符號

list-style-immage:url(圖片路徑);? ? 在列表前面添加圖片

表格樣式

caption-side? ? ?表格標題位置

border-collapse? ? 表格邊框合并

border-spacing? ? ? 表格邊框間距

圖片樣式

掌握圖片屬性(大小，邊框姚垃，對齊)

width:像素;

height:像素;

border:1px solid red;? ? ? 邊框念链，1像素，正常風(fēng)格积糯，紅色

text-align:取值;? (left左對齊,center居中,right右對齊)? 水平對齊方式

vertical-align:取值;(top頂部對齊,middle中部對齊,baseline基線對齊,bottom底部對齊)?這是垂直對齊方式

float:取值;? ?(left,元素向左浮動掂墓，right元素向右浮動)? ? 文字環(huán)繞圖片的效果

移動圖片

style="position:relative;top:100px;">? ? 這就是移動圖片，反向的

背景樣式

background-color定義背景顏色

background-image:url(圖片路徑)??定義背景圖片地址

background-repeat定義背景圖片重復(fù)

repeat? 兩個方向同時平鋪? ? ?repeat-x只在水平方向平鋪? ? repeat-y只在垂直方向平鋪? ? no-repeat0不平鋪

background-position:像素值/關(guān)鍵字 ?? ? ??(10px 20px)或者ba(center)定義背景圖片位置

background-attachment:取值? ? ? ?scroll根元素一起滾? ? ? ? ? ?fixed固定不動?定義背景圖片固定

超鏈接? 偽類選擇器

a:link{}? 定義a未訪問時的樣式? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

a:visited{}? 定義a訪問后的樣式? ? ?(也可能是默認看成？君编？？)

超鏈接去除下劃線

a:hover? ? 定義鼠標經(jīng)過a元素時的樣式? ? ? ?

a:active? ? 定義鼠標點擊激活時的樣式

a:before{content:"."}可以在前面插入一個點

瀏覽器鼠標樣式

cursor:取值;? ? ? (default,pointer,text绍昂，這是三個不同的鼠標樣式)? ?用來定義鼠標樣式

盒子模型

padding:10px;? ? 設(shè)置內(nèi)邊距為10px

一個值? 上下左右都是

兩個值? ?上下? ?左右

三個值? ?上? 左右? 下

四個值?順時針?上?右? 下? 左

margin:10px;? ? ? 設(shè)置外邊距為10px? ? 左右auto自適應(yīng)

幾個值的時候跟內(nèi)邊距一樣? ? ? ? ? ? ? ? ?

display??

固定定位

position:fixed;? 可以一直在原來的地方?不管下拉還是怎么啦粹，都保持在原地?

left:10px; top:10px;? 相對于瀏覽器四個邊框而言?

絕對定位

position:absolute;? 跟固定定位一樣，只是可以隨著用戶操作滾出屏幕

相對定位

position:relative:?相對原來的自己而言窘游，

left:10px? top:10px? ?像右10px? 下10px?

css元素溢出

當(dāng)子元素的尺寸超過父元素的尺寸時，需要設(shè)置父元素顯示溢出的子元素的方式跳纳，設(shè)置的方法是通過overflow屬性來設(shè)置忍饰。

overflow的設(shè)置項：?

1、visible 默認值寺庄。內(nèi)容不會被修剪艾蓝，會呈現(xiàn)在元素框之外力崇。

2、hidden 內(nèi)容會被修剪赢织，并且其余內(nèi)容是不可見的亮靴，此屬性還有清除浮動、清除margin-top塌陷的功能于置。

3茧吊、scroll 內(nèi)容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內(nèi)容八毯。

4搓侄、auto 如果內(nèi)容被修剪，則瀏覽器會顯示滾動條以便查看其余的內(nèi)容话速。

5讶踪、inherit 規(guī)定應(yīng)該從父元素繼承 overflow 屬性的值

行內(nèi)塊元素

把行元素變成塊元素

display:inlin-block;? 變完之后就能設(shè)置寬高了

display屬性

display屬性是用來設(shè)置元素的類型及隱藏的，常用的屬性有：

1泊交、none 元素隱藏且不占位置

2乳讥、block 元素以塊元素顯示

3、inline 元素以內(nèi)聯(lián)元素顯示

4廓俭、inline-block 元素以內(nèi)聯(lián)塊元素顯示

js全稱javaScript雏婶，是運行在瀏覽器端的腳本語言

頁面嵌入

? ? 類似css,聲明這嵌入的是個js類型的文件

? ? ? ?var a = '你好!';?? ??? ??? ??? ??? ??? ??設(shè)置變量,var是設(shè)置變量的聲明函數(shù)? a就是那個變量

alert(a);?? ??? ??? ??? ??? ??? ??? ??? ?? ?alert是一個彈窗，類似python里的print

?? ??? ??? ??? ??? ??? ??? ??? ??? ??收尾

外部引入

從外部引入

變量

區(qū)分大小寫

第一個字符必須是字母白指，下劃線(_),或者美元符號$

5種基本數(shù)據(jù)類型:

number(數(shù)字類型),string(字符串類型),boolean(布爾類型)

undefined(找不到),null(空值),object(復(fù)合類型)

用js來設(shè)置id屬性或者其他屬性的元素

? ? ? ? ?? ??? ??? ?聲明嵌入

var q1 = document.getElementById('div1');? ?q1是變量? 后面是吧ID為div1的html對象賦值給q1

用js操作屬性

font-size變成style.fontSize?變成駝峰寫法

innerHTML

它可以讀取或者寫入標簽包裹的內(nèi)容

var div2 = documen.getElementById('div1')? ? 把ID?為div1賦值給名為div2的變量

var?txt = div2.innerHTML;? ? ? ? 讀取div2里的所有寫入標簽的內(nèi)容

定義函數(shù)

function aa()? ? ? ? 定義一個函數(shù)? function用來定義函數(shù)? ?函數(shù)名字叫aa

{alert('hello!')};? ? ? 函數(shù)內(nèi)容為彈出彈框為hello

aa();?? ??? ??? ??? ??? ?? ? 調(diào)用函數(shù)留晚，這個函數(shù)可以寫在定義函數(shù)上面

也可以輸入?yún)?shù)，來達到輸出的內(nèi)容

匿名函數(shù)

var q1 = document.getElementById('btn1')

q1.onclick = function(){alert("OK!")}? ? ?設(shè)置好變量告嘲，提取完屬性之后直接調(diào)用函數(shù)错维。