溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“CSS內部樣式怎么寫”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
<h2 style=" width:300px;"> </h2>
內部樣式要寫在<head></head>標簽之間
<style type=" text/css"> 樣式</style>
<link href=" 樣式表位置" rel=" stylesheet" type=" text/css">
link這個也要放在<head></head>之間
第一種：
<style type=" text/css">
@import " 直接寫css文件路徑"
</style>
第二種：
<style type=" text/css">
@import url(寫樣式表文件路徑)
</style>
一、選擇器
1.派生選擇器
例如：(選擇div里面的span)
div span{給樣式}
<div>
<span>哈哈哈</span>
</div>
2.還有
列如：(p和a 都選擇)
p,a{給樣式}
<p>你好1</p>
<a>你好</a>
二、
背景顏色：
background-color: #ccc;
background意思是背景
color 意思是顏色
背景圖片：
background-image: url(寫圖片路徑);
background-repeat: repeat-y;
repeat 意思是重復平鋪
repeat-y 意思是按y軸平鋪
repeat-x 意思是按x軸平鋪
background-repeat:no-repeat 意思是不平鋪
background-position(設置背景圖像在網頁上的位置。)
background-position：center;(意思是定位圖片的位置)
1.center（居中）
2.top （上）
3.right (右)
4.left (左)
5.bottom (下)
background-position:50% 50%;(這種方法也可以使背景圖片居中)
background-attachment:fixed(使背景固定不隨滾動條走)
fixed(意思是固定的)
attachment(意思是附在那里的意思)
background-size (規定背景圖片的尺寸是css3的)
size 意思是尺寸
屬性： 1.contain
(把圖像圖像擴展至最大尺寸，以使其寬度和高度完全適應內容區域 )
意思就是按等比例縮放填滿區域
2.cover(鋪滿區域)
3.percentage(以父元素的百分比來設置背景圖像的寬度和高度)
注意：如果只設置一個值，則第二個值會被設置為 "auto"。
CSS個人總結筆記（收藏吧）
三、字體
這里要注意引號嵌套時外層要用雙引號內層要用單引號
font-family:"微軟雅黑","字體二","字體三"........;(定義字體)
定義多個字體的好處就是系統會默認從第一個字體開始找，如果系統沒有這個字體則默認使用瀏覽器設定的字體
font-style:normal;(定義字體如何顯示)
normal(是正常顯示)
italic(文本傾斜顯示)
font-weight：900； （設置文本的粗細）
weight(意思是重量的意思)
默認值：normal 等于400
還可以設置為 bold 等同于700
注意：設置文本粗細的值為： 100 ~ 900 為字體指定了 9 級加粗度
font-size:50px;(設置文字的大小)
單位有：px em
1em=16像素
2em 等于當前字體尺寸的兩倍。
四、文本
text-indent:;
text(文本)
indent(縮進)
單位：em
px
注意：
可以設置為負值。利用這種技術，可以實現很多有趣的效果，比如“懸掛縮進”，即第一行懸掛在元素中余下部分的左邊：
text-align (用于文本的對齊)
align(意思是排列)
后面的屬性有：1.left(左對齊)
2.right(右對齊)
3.center（居中）
4.justify(像word文檔里面的兩端對齊)
word-spacing(設置改變字（單詞）之間的標準間隔)
spacing(間隔)
單位： em
px
使用這個無論是詞語還是文字都必須有空格才能實現效果。
列如：
(你好 歡迎你來到 我的工作室。)
text-decoration(一般使用于去掉下劃線)
decoration(裝飾的意思)
屬性：1.none 去掉下劃線
2.underline (添加下劃線)
3.overline (添加上面劃線)
4.line-through (穿過一條線，一般多用于打折的價格劃一條線)
5.blink (閃爍的)
line-height(用于設置行高)
letter-spacing 字母間隔
五、a標簽的一個樣式
a:hover (鼠標指針位于鏈接的上方)
用法：<style>
a:hover{
font-size：20px;
</style>
當鼠標滑上去的時候字體變大20px。
六、列表
列表樣式：
如何去掉無序列表前面的小圓點：
list-style:none;
七、表格：
table, th, td
border: 1px solid blue;
border：邊界 邊框
1px 定義邊框的粗細
solid 定義實線
blue 定義顏色
border-collapse:collapse;(將邊框折疊為單一邊框)
border-spacing:50px;(將格與格之間的間距拉開，
但是是邊框線沒有合并的情況下才能生效)
八、行內元素轉換為塊元素
display:block;
block 使其轉化為塊元素
inline 使其轉化為行內元素
九、外邊距與內邊距
內邊距：
padding-top (上)
padding-right (右)
padding-bottom (下)
padding-left (左)
外邊距：
margin-top (上)
margin-right (右)
margin-bottom (下)
margin-left (左)
注意：與其到底是使用外邊距還是內邊距依據誰對誰而定！！
十、相對定位：(相對定位雖然元素離開原來的位置，但是不釋放原來的空間)
position: relative;
left: 30px;
top: 20px;
十一、絕對定位：(絕對定位元素離開，并且釋放原來的空間)
position: absolute;
left: 30px;
top: 20px;
為了瀏覽器適應，所以使用絕對居中時上面一定要寫一個相對定位作為參照。
十二、overflow：溢出部分的處理
scroll(卷簾) 出現滾動條
hidden 隱藏
auto 自動出現滾動條
偽類選擇器：
#a ul li:first-child{
margin-left:0px;
first-child(第一個孩子的意思)
以上這段代碼便是找到類a里面的ul 里面的Li 將第一個li標簽的外左間距去掉。
last-child(最后一個)
#a ul li:nth-child(1){
括號里面是幾選擇的就是第幾個
如果說三的倍數就是寫 3N
十三、CSS樣式的權重問題：
ID>Class>標簽本身(屬性選擇器)
十四、相對定位絕對定位的理解：
絕對定位：將被賦予此定位方法的對象從文檔流中拖出，使用left，right，top，bottom等屬性相對于其最接近的一個最有定位設置的父級對象進行絕對定位，如果對象的父級沒有設置定位屬性，即還是遵循HTML定位規則的，則依據body對象左上角作為參考進行定位。
相對定位(relative)：對象不可層疊，依據left，right，top，bottom等屬性在正常文檔流中偏移自身位置。
且不釋放原來的位置。依據當前位置進行定位。
十五、邊邊陰影：
box-shadow(給邊框陰影)
div
box-shadow: 10px 10px 5px #888888;
陰影水平偏移值（可取正負值）；陰影垂直偏移值（可取正負值）；陰影模糊值；陰影顏色
給邊框切圓角：
border-radius:4px;
注意這里面的值取偶不取奇
相關屬性： border-top-right-radius ,
border-bottom-right-radius ,
border-bottom-left-radius ,
border-top-left-radius
文本溢出時顯示為省略號（..........）
text-overflow ：ellipsis
resize:none;
十六、input點擊以后藍色邊框的去除：
outline:none; 去除input的藍色的那個線
十七、 ul ol dl 默認都有一個外邊距：
給他們所有的margin:0;padding:0;
“CSS內部樣式怎么寫”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
