常見的css選擇器
/*<!-- 組合選擇器-->*/
h1,h2,h3
{
color:cyan;
}
/*id選擇器*/
#one {
color: antiquewhite;
}
/*類選擇器*/
.cc{
color: palevioletred!important;
}
/* 后代選擇器*/
ul li {
color: palevioletred;
}
/* 屬性選擇器*/
input[name=user]
{
background: cadetblue;
}
/* 偽類選擇器 hover 鼠標懸停的時候觸發*/
a:hover{
color: red;
}
/*列表中的某一個元素*/
ul li:nth-child(3){
color: red;
}
/*表單里的奇數 偶數為2n*/
ul li:nth-child(2n-1){
color: red;
}
table tr:nth-child(3n){
color: yellow;
}
table tr:nth-child(2n){
background: palevioletred;
}
td:hover{
background: red;
}
</style>
</head>
<body>
<!--設置為重要 !important優先級最高-->
<h1>1111111</h1>
<h2>2222222</h2>
<h2 id="one" class="cc">2222222</h2>
<!--行內選擇器-->
<h2 style="color: red">3333333</h2>
<!--
標簽選擇器:指定是哪一些標簽
類選擇器:指定的是哪一類標簽
id選擇器:指定是哪一個標簽
優先級:越具體指定,優先級就越高
-->盒子模型
<style>
#a{
/*上top 右right 下bottom 左 left */
border: solid 2px palevioletred;
width: 200px;
height: 200px;
}
#a1{
width: 200px;
height: 200px;
border: solid 5px red;
/*圓形 要是正方形 圓形的長度是他們的一般*/
border-radius: 100px;
/*圓角*/
/* border-bottom-left-radius: 20px; */
}
/* 上 右 下 左 內邊距*/
#a2{
width: 200px;
height: 200px;
border: solid 5px red;
/*他會把盒子面積增大*/
/* padding: 30px; */
/*上 右 下 左*/
padding: 10px 20px 25px 12px;
}
/* 上 右 下 左 盒子與盒子之間的間距 外邊距 margin */
#a3{
margin: 20px 0px 50px 50px;
border: solid 3px;
}
#a4{
width: 200px;
height: 200px;
border: solid 5px red;
margin: auto;
}
/*陰影*/
#a5{
width: 200px;
height: 200px;
border: solid 5px red;
/*向右 向下 模糊 擴大面積*/
box-shadow: 5px 5px 5px 5px palevioletred;
}
</style>
</head>
<body>
<div id ="a"></div>
<div id ="a1"></div>
<div id ="a2">jsdaofjasodf</div>
<div id ="a3">我擦勒</div>
<div id ="a4">我擦勒</div>
<div id ="a5">我擦勒</div>文本屬性
<meta charset="UTF-8">
<title>偽對象</title>
<style>
.name::before{
content: "你問";
color: aquamarine;
}
.name::after{
content: "肯定帥啊!";
color: red;
}
.name::selection{
background: antiquewhite;
color: red;
}
.a1{
font-style: italic;/*斜體*/
font-weight: bold;/*加粗*/
font-size: 50px;/*字體大小*/
font-family: "華文宋體";/*設置字體*/
}
.a2{
font:italic bold 50px "華文宋體";
}
.a3{
border: palevioletred;
font:20px/3 "宋體"; /*字體大小/行高 "字體種類" 上下行距*/
background: beige;
}
/* @ 指定規則,來設置引入的自定義字體 */
@font-face
{
font-family:"靚仔";
src: url("華文宋體");
}
/*自定義字典*/
.c4 {
font:66px/2 "靚仔";
}
/*去掉點*/
ul
{
list-style: none;
/*改變鼠標的形態*/
cursor: wait;
}
</style>
</head>
<body>
<h2 class="name" style="color: royalblue">我帥不帥</h2>
<ul>
<li class="a1">設置字體相關屬性11111</li>
<li class="a2">設置字體相關屬性22222</li>
<li class="a3">設置字體相關屬性3333</li>
<li class="c4">設置字體相關屬性3333</li>
</ul>相對、絕對、固定路徑
<style>
/* 公共屬性 */
.gg{
width: 100px;
height: 120px;
border: solid 1px blue;
}
.a1{
background-color: antiquewhite;
}
.a2{
background-color: red;
/* 相對定位 根據父類定位 */
position: relative;
left: 50px;
top: 20px;
z-index: -11px;
/* 絕對定位 默認定位body
效果：脫離文檔流，后面的額內容自動補齊
使用：絕對定位會參照父極的相對定位進行移動，如果父級中沒有relative，相對如body進行定位
（1）把想要的父級元素變成relative
（2）把定位的元素變成absolute
*/
/* position: absolute; */
/* 此時會在網頁的右上角 */
/* top: 0px; */
/* right: 0px; */
/* 值越大 就越上層 */
/* z-index: -1px; */
}
*{
margin: 0px;
padding: 0px;
}
.a3{
background-color: rgb(255, 0, 0);
/* 固定定位 */
/* *代表通配選擇符，代表所有的標簽，
默認標簽中含有默認的間距，要在一開始的時候全部去掉 */
position: fixed;
left: 50%;
margin-left: -50px;
top: 50%;
margin-top: -60px;
}
.a4{
background-color: greenyellow;
z-index: 20px;
}
img{
position: fixed;
bottom: 20px;
left: -80px;
/* 延遲動畫效果 */
transition: all 1s ease 0.2s;
}
img:hover{
left: 5px;
}
</style>
</head>
<body>
<!-- 相對定位：參考得按是他自己本身，相對原始位置進行定位；
如果添加了定位：無論是添加（相對 絕對 固定）屬性，后會增加額外的其他屬性
left top right z-index 控制疊關系，值越小就越下層
-->
<div class="a1 gg"></div>
<div class="a2 gg"></div>
<div class="a3 gg"></div>
<div class="a4 gg"></div>
<img src="prod1.gif">
</div>浮動
<style>
div {
/* 轉換為行內元素 */
/* display: inline; */
/* 轉換為塊狀元素 */
/* display: block; */
/* 隱藏元素 */
/* display: none; */
/* 轉成行內塊狀元素 */
/* display: inline-block; */
border: solid 1px red;
}
.con{
width: 100px;
height: 100px;
}
.a1{
background-color: aqua;float: left;
}
.a2{
background-color: blue;float: left;
}
.a3{
background-color: red;float: left;
}
.a4{
background-color: wheat;clear: both;
}
</style>
</head>
<body>
<!-- 元素的分類
塊狀元素： block
行內元素： inline
行內塊狀元素：inline-block
-->
<!-- <div>1111</div> -->
<!-- <div>2222</div> -->
<!-- 浮動
float:left 向左浮動，元素素脫離原始文檔，后面的內容自動補齊
float:right ,元素脫離原始文檔，后面的自動補齊
目的：讓塊狀元素在一排顯示
clear：both 清楚兩變得浮動
浮動：
如果對行內元素進行浮動：
默認會把行內元素升級成行內塊狀元素，可以設置寬和高
浮動產生內容塌陷問題
-->
<div class="a1 con">11111111111</div>
<div class="a2 con"></div>
<div class="a3 con"></div>
<div class="a4 con"></div>
浙公網安備 33010602011771號