CSS
三种引入方式：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css</title>
<style> //内部样式
.box1{
width: 300px;
height: 300px;
background-color: blue;
}
</style>
</head>
<body>
<div class="box1">woshisb</div>
</body>
<link rel="stylesheet" href="">
//链接外部样式
选择器{
属性名: 属性值;
属性名: 属性值;
属性名: 属性值;
}
p{
color: aqua;
} //标签选择器（选中所有的p标签）
div{
font-size: 40px;
} //选中所有的div
#box1{
color: blueviolet;
} //id选择器
.box2{
width: 300px;
height: 300px;
background-color: blue;
} //类选择器
*{
background-color: pink;
} //通配符选择器
.a>li{
background-color: aqua;
} //子代选择器
<ul class="a">
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li> //子代
<li>1</li>
<ul>
<li>2</li> //后代
<li>2</li>
<li>2</li>
<li>2</li>
</ul>
</ul>
.a li{
color: brown;
} //匹配所有后代（包括亲生和派生）
<style>
div,
p,
span{
color: red;
} //复合选择器（给多种标签加相同的样式）
</style>
</head>
<body>
<div>hello</div>
<p>Hi</p>
<span>you</span>
input{
background-color: blueviolet;
}
input[type="password"]{
background-color: aqua;
} //属性选择器
div[id]{
} //匹配有id的div
input[type^="te"]{
background-color: darkorange;
} //匹配由te开头的input
input[type$="l"]{
background-color: chartreuse;
} //匹配以l结尾的input
input[type*="e"]{
background-color: darkgoldenrod;
} //匹配包含e的input
字体的样式
div{
font-size: 40px; //大小
font-weight: bolder //是否加粗，400=normal; 800=bold;
font-style: italic; //倾斜
}
font:italic 900 70px "微软雅黑" //复合写法（前两个属性可省略且顺序一致）
文本样式
p{
text-indent: 10px;
font-size: 2em;
} //em代表当前字体大小，那么2em就表示两倍的当前大小
作业：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span{
font-weight: bold;
font-size: 2em;
}
</style>
</head>
<body>
<h2>青春不常在,抓紧谈恋爱</h2>
<form action="#">
性别
<input type="radio" name="gander" value="nan"> 男
<input type="radio" name="gander" value="nu"> 女<br />
生日
<select name="年" >
<option value="">--请选择年--</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
</select>
<select name="月" >
<option value="">--请选择月--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select name="日" >
<option value="">--请选择日--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select><br />
所在地区 <input type="text" name="area" value="北京思密达"><br />
婚姻状况 <input type="radio" name="hunyin" value="wei">未婚
<input type="radio" name="hunyin" value="yi">已婚
<input type="radio" name="hunyin" value="li">离婚<br />
学历 <input type="text" value="幼儿园"><br />
喜欢的类型 <input type="checkbox" name="ty" value="fu">抚媚的
<input type="checkbox" name="ty" value="fu">可爱的
<input type="checkbox" name="ty" value="fu">小鲜肉
<input type="checkbox" name="ty" value="fu">老腊肉
<input type="checkbox" name="ty" value="fu">都喜欢<br />
自我介绍 <textarea col="5" rows="2" >自我介绍</textarea><br />
<button>免费注册</button><br />
<input type="checkbox">我同意注册条款和会员加入标准<br />
<a href="E:\C\web前端\images\1.gif">我是会员，立即登录</a><br /><br />
<span>我承诺</span><br />
<ul>
<ul>
<ul>
<ul type="disc">
<li>年满18岁、单身</li>
<li>抱着严肃的态度</li>
<li>真诚寻找另一半</li>
</ul>
</ul>
</ul>
</ul>
</form>
</body>
</html>
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
