day2 - css基础语法
1.常用标签
下拉列表：select、option、optgroup
1)select标签：代表整个容器
2)option标签：代表列表中的每个元素（下拉表中的每个选项）
3)optgroup标签：对选项进行分组
<label for="">所在的省份:</label>
<select>
<!-- 使用option标签的时候必须同时给标签内容和value属性赋值，一般赋相同的值 -->
<option value="四川省">四川省</option>
<option value="辽宁省">辽宁省</option>
<option value="吉林省">吉林省</option>
<option value="广东省">广东省</option>
</select>
<select>
<option value="成都市">成都市</option>
<option value="绵阳市">绵阳市</option>
</select>
<hr>
<label for="">所在的城市：</label>
<select>
<optgroup label="四川省">
<option value="成都市">成都市</option>
<option value="德阳市">德阳市</option>
<option value="眉山市">眉山市</option>
<option value="乐山市">乐山市</option>
</optgroup>
<optgroup label="广东省">
<option value="深圳市">深圳市</option>
<option value="广州市">广州市</option>
<option value="佛山市">佛山市</option>
<option value="珠海市">珠海市</option>
</optgroup>
</select>多行文本域：textarea
1)标签内容：输入框内容
2)placeholder：输入提示信息
3)maxlength：能输入的字符的最大个数
4)rows：能同时显示的行数
5)cols：设置一行能显示的字符的个数(不精确)
<textarea placeholder="请输入你的建议...." maxlength="200" rows="3" cols="40">张三</textarea>无语义标签：div
一般不会使用div来给网页提供内容；div主要用于对网页中的内容进行分块或者分区。
2.css基础语法
1.认识css
css又叫层叠样式表(简称样式表)，它是专门用来给标签设置样式和布局
2.css代码怎么写
- css语法结构
选择器{属性名1:属性值1; 属性名2:属性值2; 属性名3:属性值3;…}
- 说明
a.选择器
选择器是用来选中需要添加样式的标签的（注意：内联样式不需要写’选择器{}'）
b.属性
1)必须以’属性名:属性值‘的形式存在，多个属性之间用分号隔开。
2)常用属性：color(字体颜色)、font-size(字体大小)、background-color(背景颜色)、width(宽度)、height(高度)
c.属性值
1)颜色值：颜色对应的英文单词、#开头的16进制颜色值、0~255RGB颜色值：rgb(红,绿,蓝)、rgba(红,绿,蓝,透明度)
2)数值大小：带单位(px)的数字、使用百分比(10%)
3.css代码写哪儿
- 内联样式表
将css代码写在标签的style属性中 - (只作用于一个标签)
<p style="font-size: 30px; color: red;">我是段落1</p>
<p>我是段落2</p>
<a href="">我是超链接1</a>
<span>我是span1</span>
<a href="">我是超链接2</a>- 内部样式表
将css代码写在style标签中(style标签既可以放在head中，也可以放在body中，一般放在head中) - 作用于整个html文件
<style>
/* 这里面写的是css代码 */
a{
color: blueviolet;
font-size: 40px;
}
</style>- 外部样式表
将css代码写css文件中，然后在html中通过link标签导入css文件 - 可以作用于所有的html
<link rel="stylesheet" href="css/demo1.css">3.常用的选择器
选择器：css中选择器的作用是选中需要设置样式的标签。
1.元素选择器
直接将标签名作为选择器，选中html中所有的指定标签
p{} - 选中所有的p标签
a{} - 选中所有的a标签
<p>我是段落1</p>
<a href="">我是超链接1</a>
<span>我是span1</span>
<p>我是段落2</p>
<div>我是div1</div>
<a href="">我是超链接2</a>
<p>我是段落3</p>
<style>
p{color: red;}
a{background-color: yellowgreen;}
</style> -->2.id选择器
在id属性值前加#作为一个选择器，选中id属性值为指定值的标签
#p1{} - 选中id属性值为p1的标签
#a{} - 选中id属性值为a的标签
- 注意：整个网页中同一个id属性只能出现一次
<p>我是段落1</p>
<a href="">我是超链接1</a>
<span>我是span1</span>
<p id="p1">我是段落2</p>
<div>我是div1</div>
<a id="name">我是超链接2</a>
<p>我是段落3</p>
<style>
#p1{color: red;}
#name{
color: hotpink;
font-size: 30px;}
</style>3.class选择器
在class属性值前加.作为一个选择器，选中class属性值为指定值的所有标签
.p1{} - 选中class属性值为p1的所有标签
.a{} - 选中class属性值为a的所有标签
.c1.c2{} - 选中class属性值同时为c1和c2的所有标签
div.c1{} - 选中class属性值为c1的div标签
- 注意
- 不同的标签可以有相同的class值
- 同一个标签可以同时拥有多个不同的class值(给标签的class属性赋值的时候，让多个class值用空格隔开)
<p class="c1 c2 c3">我是段落1</p>
<a href="" class="a b">我是超链接1</a>
<span class="c1">我是span1</span>
<p id="p1" class="c2 b a">我是段落2</p>
<div class="c1">我是div1</div>
<a id="name">我是超链接2</a>
<p class="c1">我是段落3</p>
<style>
.c1{color: red;}
.a.b{
font-weight: 900;
background-color: aquamarine;}
p.c1{color: hotpink;}
</style>4.通配符
直接将*作为选择器，选中当前页面中所有的标签
<p>我是段落1</p>
<a href="">我是超链接1</a>
<span>我是span1</span>
<p>我是段落2</p>
<div>我是div1</div>
<a href="">我是超链接2</a>
<p>我是段落3</p>
<style>
*{color: red;}
</style>5.群组选择器
将多个选择器用逗号隔开作为一个选择器，同时选中用逗号隔开的每个选择器选中的所有标签
p,a{} - 选中所有的p标签和a标签
p,.c1{} - 选中所有的p标签和所有class值为c1的标签
#p1,.c1 - 选中id值为p1的标签和class值为c1的标签
<p class="c1 c2 c3">我是段落1</p>
<a href="" class="a b">我是超链接1</a>
<span class="c1">我是span1</span>
<p id="p1" class="c2 b a">我是段落2</p>
<div class="c1">我是div1</div>
<a id="name">我是超链接2</a>
<p class="c1">我是段落3</p>
<style>
p,a{color: red;}
#p1,.c1{background-color: yellow;}
</style>6.子代、后代选择器
后代选择器
将多个选择器用空格隔开作为一个选择器
子代选择器
将多个选择器用>隔开作为一个选择器
<p>我是段落1</p>
<div id="box1">
<p>我是段落2</p>
<a href="">我是超链接1</a>
<div id="box2">
<p>我是段落3</p>
<span>
<p>我是段落4</p>
<a href="">我是超链接2</a>
</span>
</div>
<span>
<a href="">我是超链接3</a>
<p>我是段落5</p>
</span>
</div>
<span>
<p>我是段落6</p>
</span>
<style>
/* 选中所有的p标签 */
p{color: red;}
/* 选中属于div子代的p标签 */
div>p{color: red;}
/* 选中div中div中的p标签， 前后是父子关系*/
div>div>p{background-color: yellow;}
/* 选中属于div后代的p标签 */
div p{color: red;}
</style>4.伪类选择器
1.普通选择器和伪类选择器的区别
1)普通选择器选中的是标签（选中标签的所有状态，所以通过普通选择器选中标签设置的样式会作用于这个标签的所有状态）
2)伪类选择器选中的时候标签的某种状态
2.伪类选择器的写法
普通选择器:伪类选择器{}
选中指定标签的指定状态
- 常见的伪类选择器
- link - 链接未访问过对应的状态（只有a标签有效）
- visited - 链接已经访问过对应的状态（只有a标签有效）
- hover - 鼠标悬停在标签上的时候对应的状态（针对所有标签有效）
- active - 鼠标在标签上按下的时候对应的状态（针对所有标签有效）
案例1：link和visited
<a id="a1" href="https://www.baidu.com">百度</a>
<style>
#a1:link{color: red;}
#a1:visited{color: green;}
</style>案例2： hover
<div id="box1">
<a href="https://www.jd.com">京东</a>
<p>我是段落1</p>
<button>确定</button>
</div>
<style>
#box1>a{
color: #666666;
/* 去掉a标签默认的下划线 */
text-decoration: none;
}
#box1>a:hover{
color: red;
/* 添加下划线 */
text-decoration: underline;
}
button{
background-color: crimson;
width: 100px;
height: 45px;
border: none;
color: white;
font-size: 18px;
}
button:hover{
background-color: red;
}
#box1>p:hover{
/* 让光标变成手指 */
cursor: pointer;
}
#box1>p:active{
color: red;
font-size: 100px;}
</style>5.选择器优先级
-
内联样式表样式的优先级高于内部和外部（内部和外部本身没有高低之分，看选择和顺序）
-
在内部和外部样式中：权重值越高优先级越高
- 元素选择器 - 1
- class选择器 - 2
- id选择器 - 4
- 群组选择器看各自的权重
- 后代和子代的权重，各个选择器相加
-
在’!important‘面前，选择器的优先级无意义，它对应的样式一定有效
-
最后排序：!important > 内联样式 > id选择器 > class选择器 > 元素选择器
<div>
<p id="p1" class="c1" style="color: red;">我是段落1</p>
</div>
<style>
div>p{color: deeppink;}
#p1{color: yellow;}
p{color: green !important;}
.c1{color: blue;}
</style>
8957
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
