国产无码综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

<style id="jjzob"></style>

<delect id="jjzob"></delect>

<style id="jjzob"></style>

<style id="jjzob"><nav id="jjzob"><tt id="jjzob"></tt></nav></style>

<style id="jjzob"></style>

css-選擇器、常見樣式、標簽分類

2年前作者：咸魚不咸魚分類：Toy博客閱讀(44)違法舉報

這篇具有很好參考價值的文章主要介紹了css-選擇器、常見樣式、標簽分類。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點擊"舉報違法"按鈕提交疑問。

CSS

CSS簡介

層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現(xiàn)HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進行格式化。 [1]
CSS 能夠?qū)W(wǎng)頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網(wǎng)頁對象和模型樣式編輯的能力。 [2]

1.層疊

多個樣式可以作用在同一個html的標簽上

2.樣式表

提供了豐富的樣式修飾內(nèi)容

3.作用

樣式豐富，功能強大
內(nèi)容和樣式分離(解耦)

CSS的使用

1.行內(nèi)樣式

在標簽中使用style屬性進行CSS樣式設置
樣式名與樣式值之間用冒號隔開
樣式與樣式之間用分號隔開

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div style="width:500px;height:500px;background-color: rgb(90, 139, 102);"></div>
</body>
</html>

2.內(nèi)部樣式

在<head>標簽中使用<style>標簽進行設置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
</body>
</html>

3.外部樣式

將CSS樣式獨立到.css的文件中
再將這個文件導入到需要使用這些樣式的HTML文件中，使用標簽。

（1）index.html 頁面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link href="css/demo.css" rel="stylesheet">
</head>
<body>
    <div></div>
    <div></div>
</body>
</html>

(2) demo.css css文件

div{
    width: 200px;
    height: 200px;
    background-color: red;
}

4.三種樣式的優(yōu)先級 (就近原則)

行內(nèi)樣式>(內(nèi)部樣式&外部樣式)

5.三種樣式的生效范圍

外部樣式>內(nèi)部樣式>行內(nèi)樣式

CSS選擇器

1.CSS選擇器

（1）為什么需要選擇器

內(nèi)部樣式和外部樣式中，需要去找到要設置樣式的標簽，這時就需要選擇器。

（2）語法

選擇器{

	樣式名1:樣式值1;

	……

}

2.基本選擇器

（1）標簽選擇器

通過標簽名來獲取標簽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
</body>
</html>

(2) ID選擇器

通過標簽的ID屬性的值來獲取標簽
注意：ID屬性值在當前頁面上是唯一的
使用 ‘*’

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #test{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div>div1</div>
    <div>div2</div>
    <div id="test">div3</div>
    <div>div4</div>
</body>
</html>

（3）class選擇器

通過標簽的class屬性值來獲取標簽
注意：class屬性值可以重復
使用 ‘.’

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .demo{
            color: red;
        }
    </style>
</head>
<body>
    <div>div1</div>
    <div class="demo">div2</div>
    <div>div3</div>
    <div>div4</div>
    <p class="demo">p1</p>
</body>
</html>

（4）三大基本選擇器的優(yōu)先級

ID選擇器>class選擇器>標簽選擇器

2.其他選擇器

（1）全局選擇器

選中當前頁面上所有的標簽
使用 ‘*’

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的使用</title>
    <style>
        *{
            background-color: red;
        }
    </style>
</head>
<body>
    <div>這是DIV</div>
    <div>這是DIV</div>
    <div class="last">這是DIV</div>
    <p>這是P標簽</p>
    <p class="last">這是P標簽</p>
</body>
</html>

（2）組合選擇器

選中當前頁面上所選中的標簽
使用 ‘,’

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的選擇器</title>
    <style>
        #test,p,span{
            color: red;
        }
    </style>
</head>
<body>
    <div>這是DIV</div>
    <div id="test">這是DIV</div>
    <div>這是DIV</div>
    <p>這是P標簽</p>
    <p>這是P標簽</p>
    <span>這是span</span>
</body>
</html>

（3）層級選擇器（后代選擇器）

使用空格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的選擇器</title>
    <style>
        div span{
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <p>
            <span>這是最里面的span</span>
        </p>
        <span>這是div的兒子span</span>
    </div>
    <span>這是div的兄弟span</span>
</body>
</html>

（4）子選擇器

選擇定位到的標簽
使用 ‘>’

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的選擇器</title>
    <style>
        div>span{
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <p>
            <span>這是最里面的span</span>
        </p>
        <span>這是div的兒子span</span>
    </div>
    <span>這是div的兄弟span</span>
</body>
</html>

（5）屬性選擇器

使用：[屬性名=屬性值]
獲取所有屬性名是屬性值的標簽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的選擇器</title>
    <style>
        [title=last]{
            color: red;
        }
    </style>
</head>
<body>
    <div title="first">這是DIV</div>
    <div>這是DIV</div>
    <div title="last">這是DIV</div>
    <div>這是DIV</div>
    <div title="last">這是DIV</div>
    <p title="last">這是P</p>
</body>
</html>

（6）偽類選擇器

主要針對超鏈接
a:link{}：未被訪問時
a:visited{}：訪問過后
a:hover{}：鼠標懸浮時（hover也可以用于其他標簽）
a:active{}：鼠標激活時，點擊未釋放

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的選擇器</title>
    <style>
        a:link{
            color: black;
            text-decoration: none;
        }
        a:visited{
            color: gainsboro;
        }
        a:hover{
            color: pink;
        }
        a:active{
            color: aqua;
        }
    </style>
</head>
<body>
    <a href="http://www.taobao.com">淘寶</a>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的選擇器</title>
    <style>
        div:hover{
            color: pink;
        }
    </style>
</head>
<body>
    <div>這是DIV</div>
</body>
</html>

CSS常見樣式

1.尺寸樣式

height：設置元素的高度
width：設置元素的寬度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的使用</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div>這是DIV</div>
    這是測試
</body>
</html>

2.字體樣式

font-size：字體大小
font-style：字體風格(取值：italic/normal…)
- italic 斜體
- normal : 默認值。正常的字體
font-family：字體類型(取值：隸書/微軟雅黑…)
font-weight：字體粗細取值:Normal 默認值。
- bold 粗體字符
- bolder 更粗的字符
- lighter 定義更細的字符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的使用</title>
    <style>
        span{
            font-size: 42px;
            font-style: italic;
            font-family: '宋體';
            font-weight: bold;
        }
    </style>
</head>
<body>
    <span>這是SPAN</span>
</body>
</html>

3.字體樣式

color：文本顏色（取值：colorname或#0000FF）
text-align：文本對齊（取值：left/right/center…）
text-decoration：文本裝飾，取值:none默認。
- underline下劃線。
- overline上劃線
- line-through刪除線
line-height：設置行高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的使用</title>
    <style>
        div{
            width: 400px;
            height: 200px;
            background-color: aquamarine;
            color: red;
            text-align: center;
            text-decoration: line-through;
            line-height: 200px;
        }
    </style>
</head>
<body>
    <div>
        這是DIV
    </div>
</body>
</html>

4.邊框樣式

border-width：邊框?qū)挾?，按方向設置：border-(left/right/top/bottom)-width
border-color：邊框顏色，按方向設置：border-(left/right/top/bottom)-color
border-style：邊框風格，按方向設置：border-(left/right/top/bottom)-style

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的使用</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: aquamarine;
            /* border: 10px black solid; */
            border-top-width: 10px;
            border-right-width: 20px;
            border-bottom-width: 30px;
            border-left-width: 40px;
            border-top-color: red;
            border-right-color: gray;
            border-bottom-color: yellow;
            border-left-color: orange;
            border-top-style: solid;
            border-right-style: double;
            border-bottom-style: dashed;
            border-left-style: dotted;
        }
    </style>
</head>
<body>
    <div>這是DIV</div>
</body>
</html>

border-radius：圓角邊框按方向設置值：border-(top/bottom)-(left/right)-radius

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的使用</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: red;
            /* border-radius: 1px; */
            border-top-left-radius: 10px;
            border-top-right-radius: 20px;
            border-bottom-left-radius: 30px;
            border-bottom-right-radius: 40px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

5.背景樣式

background-color：yellow;背景顏色
background-image：url(img/1.jpeg);背景圖片
background-repeat：背景是否平鋪，
- 取值:repeat-x:水平方向平
- repeat-y :垂直方向平，
- repeat :水平和垂直方向同時平
- no - repeat : 不平鋪
background-size：背景圖片大小
background-position：center;背景偏移

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的使用</title>
    <style>
        div{
            width: 500px;
            height: 500px;
            background-color: red;
            background-image: url(img/gouza.png);
            background-size: 50px 50px;
            background-repeat: no-repeat;
            background-position: center;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

6.盒子模型

css-選擇器、常見樣式、標簽分類,前端,css,前端

content：內(nèi)容
padding：內(nèi)邊距
border：邊框
margin：外邊距

（1）內(nèi)邊距

padding：內(nèi)容與邊框之間的距離
常用樣式
- padding：
- padding-top：
- padding-right：
- padding-bottom：
- padding-left：
主要作用：調(diào)整標簽內(nèi)容的位置，但是，會導致整個標簽大小的變化

padding:10px;代表四個方向的內(nèi)邊距都是10個像素

padding:10px 20px;代表上下內(nèi)邊距是10像素，左右內(nèi)邊距是20像素

padding:10px 20px 30px;代表上內(nèi)邊距10像素，右內(nèi)邊距20像素，下內(nèi)邊距30像素，左內(nèi)邊距同右

padding:10px 20px 30px 40px;分別代表上，右，下，左內(nèi)邊距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的使用</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: red;
            border: 10px black solid;
            /* padding: 50px; */
            /* padding: 50px 100px; */
            /* padding: 50px 100px 150px; */
            padding: 50px 100px 150px 200px;
        }
    </style>
</head>
<body>
    <div>
        這是DIV的內(nèi)容這是DIV的內(nèi)容這是DIV的內(nèi)容這是DIV的內(nèi)容
        這是DIV的內(nèi)容這是DIV的內(nèi)容這是DIV的內(nèi)容這是DIV的內(nèi)容
        這是DIV的內(nèi)容這是DIV的內(nèi)容這是DIV的內(nèi)容這是DIV的內(nèi)容
        這是DIV的內(nèi)容這是DIV的內(nèi)容這是DIV的內(nèi)容這是DIV的內(nèi)容
    </div>
</body>
</html>

（2）外邊距

margin：邊框與父容器之間的距離
常用樣式
- margin
- margin-top
- margin-right
- margin-bottom
- margin-left
主要作用：調(diào)整標簽本身相對于父標簽的位置
外邊距的常用方式：設置標簽水平居中
- margin: auto;

margin:10px;代表四個方向的外邊距都是10個像素

margin:10px 20px;代表上下外邊距是10像素，左右外邊距是20像素

margin:10px 20px 30px;代表外內(nèi)邊距10像素，右外邊距20像素，下外邊距30像素，左外邊距同右

margin:10px 20px 30px 40px;分別代表上，右，下，左外邊距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的使用</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: red;
            border: 10px black solid;
            /* margin: 50px; */
            /* margin: 50px 100px; */
            /* margin: 50px 100px 150px; */
            /* margin: 50px 100px 150px 200px; */
             
        }
    </style>
</head>
<body>
    <div>
        這是DIV的內(nèi)容這是DIV的內(nèi)容這是DIV的內(nèi)容這是DIV的內(nèi)容
        這是DIV的內(nèi)容這是DIV的內(nèi)容這是DIV的內(nèi)容這是DIV的內(nèi)容
        這是DIV的內(nèi)容這是DIV的內(nèi)容這是DIV的內(nèi)容這是DIV的內(nèi)容
        這是DIV的內(nèi)容這是DIV的內(nèi)容這是DIV的內(nèi)容這是DIV的內(nèi)容
    </div>
</body>
</html>

7.布局樣式

（1）樣式

float

（2）常用值

left
right

（3）理解

在Z軸上往人的方向移動，再進行左移和右移。
左移或右移時，碰到父標簽邊框或者碰到另一個浮動框的邊框就會停下來。
實現(xiàn)框橫向排列：將需要橫向排列的框往同一個方向浮動就行了。

（4）出現(xiàn)問題

由于浮動脫離了原本的平面，所以原本的位置會被后面的標簽擠占掉，能不能讓后面的標簽不去擠占呢？

（5）解決方案

清除前面浮動對后面的標簽造成的影響
樣式：clear
常用值：left，right，both

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的使用</title>
    <style>
        #first{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        #second{
            width: 200px;
            height: 200px;
            background-color: gray;
            float: left;
        }
        #third{
            width: 300px;
            height: 300px;
            background-color: pink;
            float: left;
        }
        #fourth{
            width: 400px;
            height: 400px;
            background-color: purple;
            float: left;
        }
        #five{
            width: 1000px;
            height: 500px;
            background-color: black;
            clear:left
        }
    </style>
</head>
<body>
    <div id="first"></div>
    <div id="second"></div>
    <div id="third"></div>
    <div id="fourth"></div>
    <div id="five"></div>
</body>
</html>

8.定位樣式

為了將標簽放到指定的位置上。
通常情況下，能用盒子模型解決，就不要用定位。

（1）樣式

position

（2）常用值

absolute：絕對定位
relative：相對定位
fixed：固定定位

（3）調(diào)整位置的樣式

left
right
top
bottom

（4）絕對樣式

Z軸上往人的方向移動，原本的位置會空出來，后面的標簽就會去擠占掉
相對于頁面的頂點進行移動

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的使用</title>
    <style>
        #first{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        #second{
            width: 200px;
            height: 200px;
            background-color: gray;
            position: absolute;
            left: 100px;
            top: 50px;
        }
        #third{
            width: 300px;
            height: 300px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div id="first"></div>
    <div id="second"></div>
    <div id="third"></div>
</body>
</html>

（5）相對定位

原本的位置會一直保留
相對于原來的位置進行偏移

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的使用</title>
    <style>
        #first{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        #second{
            width: 200px;
            height: 200px;
            background-color: gray;
            position: relative;
            left: 0px;
            top: 0px;
        }
        #third{
            width: 300px;
            height: 300px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div id="first"></div>
    <div id="second"></div>
    <div id="third"></div>
</body>
</html>

（6）固定定位

原來的位置不保留
相對于頁面的頂點進行偏移
不受滾動條的影響

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的使用</title>
    <style>
        #first{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        #second{
            width: 200px;
            height: 1000px;
            background-color: gray;
        }
        #third{
            width: 300px;
            height: 300px;
            background-color: pink;
        }
        #fourth{
            width: 50px;
            height: 50px;
            position: fixed;
            right: 50px;
            bottom: 50px;
        }
    </style>
</head>
<body>
    <div id="first"></div>
    <div id="second"></div>
    <div id="third"></div>
    <div id="fourth">
        <a href="#" style="font-size:40px;text-decoration: none;color: black;">^</a>
    </div>
</body>
</html>

9.列表修飾

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的使用</title>
    <style>
        li{
            list-style-type: none;/*取消圖標*/
            /* list-style-image: url(img/gouza.png); */
            float: left;
        }
    </style>
</head>
<body>
    <ul>
        <li>橘子</li>
        <li>香蕉</li>
        <li>火龍果</li>
    </ul>
</body>
</html>

標簽的分類

1.塊標簽

獨占一行，自動換行
可以手動設置寬高

<div>,<p>,<h*>,<ol>,<ul>,<li>,<table>,<form>……

2.行標簽

不會自動換行
不能設置寬高

<span>,<font>,<strong>,<b>,<em>,<i>,<a>,<input>,<select>……

3.行塊標簽

不能自動換行
可以設置寬高

<img>

4.標簽類型的轉(zhuǎn)換

（1）樣式

display

（2）常用值

block(：轉(zhuǎn)成塊標簽
inline：轉(zhuǎn)成行標簽
inline-block：轉(zhuǎn)成行塊標簽
none：隱藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的使用</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            display: inline-block;
        }
        span{
            width: 100px;
            height: 100px;
            background-color: green;
            display: inline-block;
        }
        img{
            width: 100px;
            height: 100px;
            display: block;
        }
    </style>
</head>
<body>
    <div>
        這是DIV
    </div>
    <span>
        這是Span
    </span>
    <img src="img/gouza.png">
</body>
</html>

綜合練習

1.實現(xiàn)如下效果

css-選擇器、常見樣式、標簽分類,前端,css,前端

2.浮動完成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的使用</title>
    <style>
        li{
            list-style-type: none;
            float: left;
            background-color: green;
            color: white;
            text-align: center;
            width: 80px;
            height: 30px;
            line-height: 30px;
            border-radius: 5px;
        }
        ul{
            width: 400px;
            margin: auto;
        }
    </style>
</head>
<body>
    <ul>
        <li>首頁</li>
        <li>天貓</li>
        <li>聚劃算</li>
        <li>超市</li>
        <li>支付寶</li>
    </ul>
</body>
</html>

3.使用標簽類型轉(zhuǎn)換完成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的使用</title>
    <style>
        li{
            list-style-type: none;
            background-color: green;
            color: white;
            text-align: center;
            width: 80px;
            height: 30px;
            line-height: 30px;
            border-radius: 5px;
            display: inline-block;
            margin-left: -5px;
        }
        ul{
            width: 400px;
            margin: auto;
        }
    </style>
</head>
<body>
    <ul>
        <li>首頁</li>
        <li>天貓</li>
        <li>聚劃算</li>
        <li>超市</li>
        <li>支付寶</li>
    </ul>
</body>
</html>

enter;
width: 80px;
height: 30px;
line-height: 30px;
border-radius: 5px;
}
ul{
width: 400px;
margin: auto;
}
文章來源地址http://www.zghlxwxcb.cn/news/detail-667619.html

首頁
天貓
聚劃算
超市
支付寶

```

3.使用標簽類型轉(zhuǎn)換完成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的使用</title>
    <style>
        li{
            list-style-type: none;
            background-color: green;
            color: white;
            text-align: center;
            width: 80px;
            height: 30px;
            line-height: 30px;
            border-radius: 5px;
            display: inline-block;
            margin-left: -5px;
        }
        ul{
            width: 400px;
            margin: auto;
        }
    </style>
</head>
<body>
    <ul>
        <li>首頁</li>
        <li>天貓</li>
        <li>聚劃算</li>
        <li>超市</li>
        <li>支付寶</li>
    </ul>
</body>
</html>

到了這里，關(guān)于css-選擇器、常見樣式、標簽分類的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來自互聯(lián)網(wǎng)用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權(quán)，不承擔相關(guān)法律責任。如若轉(zhuǎn)載，請注明出處：如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實不符，請點擊違法舉報進行投訴反饋，一經(jīng)查實，立即刪除！

分享到：

領(lǐng)支付寶紅包贊助服務器費用

1.1 css style 樣式定義：行內(nèi) style 屬性、單頁＜style＞標簽、多頁＜style＞標簽
首先創(chuàng)建一個 staic 文件夾，用于存放圖片、音視頻、css 等文件夾資源：把長寬等樣式定義在某個標簽的 style 屬性中，僅對當前標簽產(chǎn)生影響，如： img src=\\\"/images/mountain.jpg\\\" alt=\\\"\\\" style=\\\"width: 300px; height: 200px;\\\" style 里面不能省略掉像素單位 px 兩種定義屬性的方式：不用 style：
2024年02月06日
瀏覽(92)
css定義超級鏈接a標簽里面的title的樣式
效果: 代碼: 總結(jié):此css 使用于任何元素,不僅僅是a標簽!
2024年02月15日
瀏覽(24)
css標簽選擇器學習
有三個div；然后在style/style中，指定了? ? ? div { ? ? ...... ? ? ?} 這樣在這里定義的樣式將應用到本頁面的所有div上；這是標簽選擇器，選擇了所有的div標簽；運行如下；假如在style/style中定義， p{ ? ?font-size:12px; ? ?background:#900; ? ?color:090; } 則樣式將應用到本頁面所有的
2024年02月11日
瀏覽(20)
【CSS】CSS 復合選擇器 ④ ( 鏈接偽類選擇器 | a:link 默認樣式 | a:visited 已訪問樣式 | a:hover 鼠標移動樣式 | a:active 選定鏈接樣式 )
鏈接偽類選擇器可以設置鏈接文本的不同狀態(tài)的樣式 : 未訪問鏈接樣式 : 默認的樣式 , 界面打開后 , 默認顯示該樣式 ; 已訪問鏈接樣式 : 點擊過的鏈接 , 鏈接變成該樣式 ; 鼠標移動到鏈接樣式 : 鼠標移動到鏈接上方 , 鏈接變成該樣式 ; 選定鏈接樣式 : 按下鼠標松開時 ,
2024年02月04日
瀏覽(28)
引入Bootstrap的CSS樣式后,＜h＞標簽、＜p＞標簽等HTML自帶的標簽被覆寫沒有？答：覆寫了。
引入Bootstrap的CSS樣式后,標簽、標簽等HTML自帶的標簽被覆寫沒有？答：覆寫了。為什么這么說？證據(jù)呢？寫一個實例，然后調(diào)試模式看一下不就得了。先看沒有引入引入Bootstrap的CSS樣式情況。代碼如下：我們用瀏覽器打開上面的代碼，然后F12進入調(diào)試模式，發(fā)現(xiàn)h1的樣式如
2024年02月09日
瀏覽(19)
HTML---CSS-引入樣式表和選擇器
CSS : Cascading Style Sheet 層疊式樣式表 HTML 用于控制網(wǎng)頁的結(jié)構(gòu)，CSS則用于控制網(wǎng)頁的外觀，想要做出美觀好看的網(wǎng)頁，CSS是必須的引入外部樣式表：它的屬性 rel 和 type 是固定的語法：引入內(nèi)部樣式表 type屬性也是固定的語法：引入行內(nèi)樣式表語法：效果： HTML中有兩個屬
2024年01月19日
瀏覽(26)
HTML&CSS(二）---HTML常見標簽
? ? ? ? ?HTML標題標簽用于定義文檔中的標題和子標題。HTML提供了六個級別的標題，分別是 h1 到 h6 ，其中 h1 表示最高級別的標題， h6 表示最低級別的標題。這些標簽通常用于創(chuàng)建內(nèi)容結(jié)構(gòu)，幫助搜索引擎和讀者理解文檔的重要性和層次結(jié)構(gòu)。下面是標題標簽的示例：在
2024年04月16日
瀏覽(20)
vue、js獲取頁面中所有css樣式（包括link標簽）案例為打印使用
最近碰到一個需求：將彈窗中的表單打印出來，還要保留彈窗表單的樣式，為了對頁面造成的影響最小采取iframe方案。獲取彈窗html內(nèi)容很好辦這個時候我們點擊打印按鈕調(diào)用上面的方法，會發(fā)現(xiàn)表單缺少樣式，怎么拿到缺少的css樣式呢，代碼如下將代碼加入方法print方法中
2024年02月09日
瀏覽(25)
CSS選擇器分類大全
選擇器(選擇符)就是根據(jù)不同需求把不同的標簽選出來這就是選擇器的作用。簡單來說，就是選擇標簽用的。分類：基礎選擇器、復合選擇器一、基礎選擇器 ?二、復合選擇器三、CSS3選擇器補充：（一）層級選擇器： ?（二）屬性選擇器（三）偽類選擇器 1、標簽選擇器
2024年02月04日
瀏覽(40)
前端-CSS 字體和文本樣式
字體大小字體粗細字體樣式字體系列文本縮進取值數(shù)字 + px 數(shù)字 + em(推薦：1em=當前標簽的 font-size 大小) 文本水平對齊方式內(nèi)容居中需要給父元素設置居中屬性 [外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-2ENfm2r2-1688123416662)(https://note.youda
2024年02月11日
瀏覽(97)

<video id="dyvp3"></video>

<sub id="dyvp3"><tr id="dyvp3"><var id="dyvp3"></var></tr></sub><form id="dyvp3"></form>

<sub id="dyvp3"></sub>

<sub id="dyvp3"><thead id="dyvp3"><li id="dyvp3"></li></thead></sub>

<ul id="dyvp3"><tr id="dyvp3"></tr></ul>