[js]01css基礎

選擇器
沖突權重計算
盒模型

css選擇器

基礎選擇器

1,標簽選擇器

a{
    /*去掉下劃線：*/
    text-decoration: none; 
}

2,類

.teshu{
    color: red;
}


<h3>我是一個h3啊</h3>
<h3 class="teshu">我是一個h3啊</h3>
<h3>我是一個h3啊</h3>
<p>我是一個段落啊</p>
<p class="teshu">我是一個段落啊</p>
<p class="teshu">我是一個段落啊</p>

<h3 class="teshu  zhongyao">我是一個h3啊</h3>

公共類: 便于使用

<style type="text/css">
    .lv{
        color:green;
    }
    .da{
        font-size: 60px;
    }
    .xian{
        text-decoration: underline;
    }
</style>

3,id選擇器

#lj1{
    font-size: 60px;
    font-weight: bold;
    color:black;
}

注:
特點:

id區分大小寫,且以字母開頭
id不能重復

使用:

盡可能的用class，除非極特殊的情況可以用id。
原因:
- 1,js要通過id屬性得到標簽;
- 2,我們會認為一個有id的元素，有動態效果;

高級選擇器

1,后代選擇器
- 后臺不一定是兒子,所有.div1“中的”p，就是后代p.
- div下所有的p

<style type="text/css">
    .div1 p{
        color:red;
    }
</style>

.div1 .li2 p{
    color:red;
}

后臺:描述的是一種祖先結構

2,交集選擇器

h3.special{
    color:red;3 }

條件:選擇的元素是同時滿足兩個條件：必須是h3標簽，然后必須是special標簽。

有沒有空格
div.red{}
和
div .red{}
不是一個意思。

3,并集選擇器
同時選2個元素,如tag.

h1,li,p{  

}


<head>
    <meta charset="UTF-8">
    <title>bingji</title>
    <style>
        p,a{
            color: yellow;
        }
    </style>
</head>
<body>
    <p>a p</p>
    <a href="">a link</a>
</body>

4.通配符選擇器

*{
    color:red;3 }

特點: 效率不高一般不用.

小結:

● 字體加粗，傾斜，下劃線：

font-weight:bold;
font-style:italic;
text-decoration:underline;

● 背景顏色、前景色：

background-color:red;
color:red;

● class和id的區別
class用于css的，id用于js的。
1）class頁面上可以重復。id頁面上唯一，不能重復。
2）一個標簽可以有多個class，用空格隔開。但是id只能有id。

● 選擇器
說IE6層面兼容的：標簽選擇器、id選擇器、類選擇器、后代、交集選擇器、并集選擇器、通配符。

p
#box
.spec
div p
div.spec
div,p7  *

權重問題

按照公式規則計算

1）繼承性。有一些屬性給祖先元素，所有的后代元素都集成上了。
哪些屬性能繼承：color、font-、text-、line-
2）層疊性。層疊性是一種能力，就是處理沖突的能力。當不同選擇器，對一個標簽的同一個樣式，有不同的值，聽誰的？這就是沖突。css有著嚴格的處理沖突的機制：
■ 選擇上了，數權重，(id的數量，類的數量，標簽的數量)。如果權重一樣，誰寫在后面聽誰的。
■ 沒有選擇上，通過繼承影響的，就近原則，誰描述的近聽誰的。如果描述的一樣近，比如選擇器權重，如果權重再一樣重，誰寫在后面聽誰的。

案例1:

案例2:

案例3:

案例4:

誰寫后面誰優先

!important標記

來給一個屬性提高權重。這個屬性的權重就是無窮大。

font-size:60px !important;

權重小結

css盒模型

理解真實占有的寬度:

.box1{
    width: 100px;
    height: 100px;
    padding: 100px;
    border: 1px solid red;
}

.box2{
    width: 250px;
    height: 250px;
    padding: 25px;
    border:1px solid red;
}

padding特點

有背景色
padding就是內邊距。padding的區域有背景顏色
四個方向上右下左

padding-top: 30px;
padding-right: 20px;
padding-bottom: 40px;
padding-left: 100px;

padding:30px 20px 40px 100px;

一些元素，默認帶有padding，比如ul標簽。

所以，我們為了做站的時候，便于控制，總是喜歡清除這個默認的padding：

*{
    margin: 0;
    padding: 0;
}

*的效率不高，所以我們使用并集選擇器，羅列所有的標簽（不用背，有專業的清除默認樣式的樣式表，今后再說）：

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
 margin:0;
 padding:04 }

boder

border是一個大綜合屬性，
1 border:1px solid red;
原來一個border是由三個小屬性綜合而成：
border-width border-style border-color。

就是把4個邊框，都設置為1px寬度、線型實線、red顏色。
border屬性能夠被拆開，有兩大種拆開的方式：
1）按3要素:

border-width、border-style、border-color

2）按方向：

border-top、border-right、border-bottom、border-left

案例:

工作中寫法:

標準文檔流

1,空白折疊現象
比如，如果我們想讓img標簽之間沒有空隙，必須緊密連接：

<img src="images/0.jpg" /><img src="images/1.jpg" /><img src="images/2.jpg" />

2,低端對齊現象

3,自動換行,一行寫滿,另啟一行

標準文檔流等級森嚴。標簽分為兩種等級:
1）塊級元素
● 霸占一行，不能與其他任何元素并列
● 能接受寬、高
● 如果不設置寬度，那么寬度將默認變為父親的100%。

2）行內元素
● 與其他行內元素并排
● 不能設置寬、高。默認的寬度，就是文字的寬度。

互相轉換:

span{
    display: block;
    width: 200px;
    height: 200px;
    background-color: pink;
}


div{
    display: inline;
    background-color: pink;
    width: 500px;
    height: 500px;
}

浮動特點:

0,浮動脫離標準文檔流
1,浮動元素相互貼靠
2,浮動有字圍效果

本文鏈接：https://blog.csdn.net/iiiiher/article/details/77646425

智能推薦

JS基礎-01-JS簡介

JavaScript發展歷史 JavaScript是世界上用的最多的腳本語言。 JavaScript誕生于1995年。布蘭登 • 艾奇（Brendan Eich，1961年～），1995年在網景公司，發明的JavaScript。 JavaScript是由網景公司發明，起初命名為LiveScript，后來由于SUN公司的介入更名為了JavaScript。備注：由于當時Java這個語言特別...

[js]03css基礎

margin塌陷現象標準文檔流中，豎直方向的margin不疊加，以較大的為準。如果不在標準流，比如盒子都浮動了，那么兩個盒子之間是沒有塌陷現象的：盒子居中margin:0 auto; margin的值可以為auto，表示自動。當left、right兩個方向，都是auto的時候，盒子居中了： 1）使用margin:0 auto; 的盒子，必須有width，有明確的width 2）只有標準流...

css補充及js基礎

css補充及js基礎一、CSS補充 1、選擇器優先級 2、margin補充 3、overflow 二、JS基礎 1、js代碼的引入方式 2、變量 3、數據類型 4、流程控制 5、運算符 6、for循環 7、while循環 8、函數一、CSS補充 1、選擇器優先級頁面效果： 2、margin補充頁面效果： 3、overflow 溢出處理，如果內容超過邊框，則隱藏 overflow:hidde...

HTML中常用操作關于：頁面跳轉，空格

1.頁面跳轉 2.空格的代替符...

freemarker + ItextRender 根據模板生成PDF文件

1. 制作模板 2. 獲取模板，并將所獲取的數據加載生成html文件 2. 生成PDF文件其中由兩個地方需要注意，都是關于獲取文件路徑的問題，由于項目部署的時候是打包成jar包形式，所以在開發過程中時直接安照傳統的獲取方法沒有一點文件，但是當打包后部署，總是出錯。于是參考網上文章，先將文件讀出來到項目的臨時目錄下，然后再按正常方式加載該臨時文件；還有一個問題至今沒有解決，就是關于生成PDF文件...