當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

Day12 CSS简单用法

發布時間：2025/3/18 CSS 20 豆豆

生活随笔收集整理的這篇文章主要介紹了 Day12 CSS简单用法小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

當我想要將html中的部分屬性修改的時候，如果單個改的話，費時費力，這時候我就需要利用css和html結合起來了。

<head><meta charset="UTF-8"><title>Title</title><style>1 按標簽名選擇p{color: red;}div{background-color: green;}2 按id屬性選擇#c1{font-size: 40px;}3 按class屬性選擇.c2{background-color: rebeccapurple;}4 * 代值的是所有標簽*{color: red;}</style></head> <body><p class="c2">hello1</p> <p id="c1">hello2</p> <p class="c2">hello3</p><div>DIV</div></body>

CSS的組合選擇器：

當代碼中有

<div>

#當我想要修改<div>里邊的<p>標簽的時候，我們可以利用后代標簽，可以這么寫。

<html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>/*!*1 后代選擇器*!*//*.outer p{*//*color: red;*//*}*//*2 子代選擇器*//*.outer>p{*//*color: red;*//*}*//*.outer .c2 p{*//**//*}*//*3 多元素選擇器*//*.outer>p,.c3{*//*color: red;*//*}*/</style></head> <body><div class="outer"><p>P</p><div class="c2"><p>PP</p></div> </div><div class="c3">P</div></body> </html>

CSS的屬性操作：

塊級標簽：可以設置長寬

內聯標簽：設置長寬無效

width：設置寬度

height：設置高度

backgroud-color:設置背景顏色

color：字體或者文字顏色

font-size：字體大小

text-align：center?? 設置居中

line-height：90px???這里如果想設置居中的話，數值需要跟上面的height相同。

背景屬性：

width:寬度

height：高度

background-color:顏色

backgroup-img:url()加載圖片

backgroup-repeat：no-repeat 不在兩邊留空白距離

backgroup-position：距離左邊和上邊的距離（可填center，center）

background: url("http://img2.imgtn.bdimg.com/it/u=4289651615,1500379285&fm=11&gp=0.jpg") no-repeat -200px -100px;#上面的3個屬性可以利用這一條來顯示

邊框屬性：

<head><meta charset="UTF-8"><title>Title</title><style>.c1{width: 200px;height: 200px;/*border-style: solid;*/ #solid是實現的意思/*border-width: 10px;*/
#邊框厚度，在200之外加了多大的空間/*border-color: red;*/ #邊框顏色border: solid red 2px;border-radius: 20%;
#讓邊框變的曲線，不直角}</style></head> <body><div class="c1">sadfsda</div></body>

邊框屬性之內外邊距：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>.c1,.c2{width: 300px;height: 300px;padding: 50px;/*padding: 50px 20px 20px;*//*順時針數*//*padding-top: 50px;*/border: dashed 2px red;}.c1{background-color: wheat;margin-bottom: 20px;/*#調的是盒子和盒子之間的距離*/}.c2{background-color: dodgerblue;margin-top: 50px;}/*內聯標簽無法設置長寬*/.s1,.s2{color: white;padding: 10px;}.s1{background-color: rebeccapurple;}.s2{background-color: darkmagenta;margin-left: 100px;}.outer{width: 100%;height: 600px;background-color: wheat;overflow: hidden;
#定義圖片頂著最上邊，無邊界}.inner{width: 80%;height: 300px;background-color: gray;margin: 100px auto;
#margin：auto是居中的意思，定位的參照是父級。如果父集沒有會繼續往上找}</style></head> <body><div class="outer"><div class="inner"></div> </div></body> </html>

float屬性操作：

怎么把多個元素在一行上去顯示？

?float會將圖片或者文本懸浮，假如某個div元素A是浮動的，如果A元素上一個元素也是浮動的，那么A元素會跟隨在上一個元素的后邊(如果一行放不下這兩個元素，那么A元素會被擠到下一行)；如果A元素上一個元素是標準流中的元素，那么A的相對垂直位置不會改變，也就是說A的頂部總是和上一個元素的底部對齊。此外，浮動的框之后的block元素元素會認為這個框不存在，但其中的文本依然會為這個元素讓出位置。?浮動的框之后的inline元素，會為這個框空出位置，然后按順序排列。

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>body{margin: 0;}.c1{width: 100px;height: 170px;background-color: #53868B;float: left;}.c2{width: 200px;height: 70px;background-color: cornflowerblue;float: left;}.c3{width: 300px;height: 120px;background-color: darkmagenta;float: right;}</style></head> <body><div class="c1"></div> <div class="c2"></div> <div class="c3"></div></body> </html>

轉載于:https://www.cnblogs.com/sexiaoshuai/p/7568894.html

總結

以上是生活随笔為你收集整理的Day12 CSS简单用法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

简单
css

上一篇： promise间隔时间添加dom
下一篇：作业1-四则运算题目生成程序