css基本语法
常用标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 1.下拉列表：select、option、optgroup
select标签：代表整个容器
option标签：代表列表中的每个元素（下拉表中的每个选项）
optgroup标签：对选项进行分组
-->
<label for="">所在的省份</label>
<select name="">
<!-- 使用option标签的时候必须同时给标签内容和value属性赋值，一般赋相同的值 -->
<option value="四川省">四川省</option>
<option value="辽宁省">辽宁省</option>
<option value="吉林省">吉林省</option>
<option value="广东省">广东省</option>
</select>
<select name="" id="">
<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>
<hr>
<!-- 2.多行文本域：textare
1)标签内容：输入框内容
2）placeholder：输入提示信息
4）rows：能同时显示的行数
5）cols：设置一行能显示的字符的个数（不精确）
-->
<textarea placeholder="请输入你的建议...." maxlength="100" rows="3" cols=""></textarea>
<!------------- 3.无语义div
一般不会使用div来给网页提供内容：div主要用于对网页中的内容进行分块或者分区。
----------------->
</body>
</html>
css基础语法
<!------------ 1.认识css
css又叫层叠样式表（简称样式表）。它是专门用来给标签设置样式和布局的
-------------->
<!------------ 2.css代码写在哪儿
1）内联样式表：将css代码写在标签的style属性中（只作用于一个标签）
2）内部样式表：将css代码写在style标签中（style标签既可以放在head中，也可以放在body中，一般放在head中）-作用于整个html文件
3）外部样式表：将css代码写在css文件中，然后在html中通过link标签导入css文件 - 可以作用于所有的html中
------------->
<!------------- 3.css代码怎么写
1）css语法结构：
选择器{属性名1:属性值1; 属性名2:属性值2; 属性名3:属性值3;... }
2）说明：
a. 选择器 - 选择器是用来选中需要添加样式的标签的（注意：内联样式不需要写'选择器{}'）
b. 属性 - 必须以'属性名:属性值'的形式存在，多个属性之间用分号隔开
常用属性:color（字体颜色）、font-size（字体大小）、background-color（背景颜色）、width（宽度）、height（高度）
c. 属性值 - 1.颜色值：颜色对应的英文单词、#开头的16进制颜色值、0~255rgb颜色值：rag（红，绿，蓝）、rgba（红，绿，蓝，透明度）
2.数值大小：带单位（px）的数字、使用百分比（10%）
-------------->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 2）内部样式 -->
<style>
/* 这里面写的是css代码 */
a{
color: blueviolet;
font-size: 80px;
}
</style>
<!-- 3）外部样式 -->
<link rel="stylesheet" href="css/demo1.css">
</head>
<body>
<!------- 1）内联样式表 -------->
<p style="font-size: 200px; color: red;">衍射红</p>
<p>它是段落2</p>
<a href="">它是超链接</a>
<span>我是span1</span>
</body>
</html>
/* 在这儿写css代码 */
span{
color: yellow;
font-size: 50px;
}
常用的选择器
<!-- 选择器：css中选择器的作用是选中需要设置样式的标签。-->
<!--
1.元素选择器 - 直接将标签名作为选择器，选中html中所有的指定标签
例如：
p{} - 选中所有的p标签
a{} - 选中所有的a标签
2.id选择器 - 在id属性值前加#作为一个选择器，选中id属性值为指定值的标签
#p1{} - 选中id属性值为p1的标签
#a{} - 选中id属性值为a的标签
注意：整个网页中同一个id属性值只能出现一次
3.class选择器 - 在class属性值前加.作为一个选择器，选中class属性值为指定值的所有标签
.p1{} - 选中class属性值为p1的所有标签
.a{} - 选中class属性值为a的所有标签
.c1.c2{} - 选中class属性值同时为c1和c2的所有标签，得同时包含c1和c2
div.c1{} - 选中class属性值为c1的div标签
注意：1）不同的标签可以有相同的class值
2）同一个标签可以同时拥有多个不同的class值
4.通配符 - 直接将*作为选择器，选中页面中的所有标签
5.群组选择器 - 将多个选择器用逗号隔开作为一个选择器，同时选中用逗号隔开的每个选择器选中的所有标签
p,a{} - 选中行所有的p标签和a标签
p,.c1{} - 选中所有的p标签和所有class值为c1的标签
#p1,.c - 选中id值为p1的标签和class值为c1的标签
6.后代选择器 - 将多个选择器用空格隔开作为一个选择器
7.子代选择器 - 将多个选择器用＞隔开作为一个选择器
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- <p>我是段落1</p>
<a href="">我是超链接1</a>
<span>我是span1</span>
<p>我是段落2</p>
<div>我是div</div>
<a href="">我是超链接2</a>
<p>我是段落3</p>
<style>
p{
color: red;
}
a{
background-color: blue;
}
</style> -->
<!--------- 案例2：id选择器 -------->
<!-- <p>我是段落1</p>
<a href="">我是超链接1</a>
<span>我是span1</span>
<p id="p1">我是段落2</p>
<div>我是div</div>
<a id="name">我是超链接2</a>
<p>我是段落3</p>
<style>
#p1{
color: darkgoldenrod;
font-size: 80px;
}
#name{
color: hotpink;
font-size: 50px;
}
</style> -->
<!-------------------案例3：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 a b">我是段落2</p>
<div class="c1">我是div</div>
<a id="name" class="c2">我是超链接2</a>
<p class="c1">我是段落3</p>
<style> -->
<!-- /* .c1{
color: blue;
}
.c2{
font-size: 60px;
background-color: yellow;
}
.c1.c2{
font-size: 50px;
}
.a.b{
font-weight: 900;
} */
/* p.c1{
color: green;
}
a.c2{
color: aqua;
font-size: 10px;
}
</style> */ -->
<!------------------ 案例4：通配符 ------------------->
<!-- <a href="">我是超链接1</a>
<span>我是span1</span>
<p>我是段落2</p>
<div>我是div</div>
<a href="">我是超链接2</a>
<p>我是段落3</p>
<style>
*{
color: aqua;
}
</style> -->
<!------------------ 案例5：通配符 ------------------->
<!-- <p class="c1 c2 c3">我是段落1</p>
<a href="" class="a b">我是超链接1</a>
<span class="c1">我是span1</span>
<p id="p1" class="c2 a b">我是段落2</p>
<div class="c1">我是div</div>
<a id="name" class="c2">我是超链接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: green;
} */
/* 选中div中div的p标签,前后是父子关系 */
/* div>div>p{
background-color: darkorange;
} */
/* 选中属于div后代的p标签 */
div p{
background-color: aqua;
}
</style>
</body>
</html>
伪类选择器
<!-- 1.普通选择器和伪类选择器的区别：
普通选择器选中的是标签（选中标签的所有状态，所有通过普通选择器选中标签设置的样式会作用于这个标签的所有状态）
伪类选择器选中的是标签的某种状态
-->
<!-- 2.伪类选择器的写法
普通选择器：伪类选择器{} - 选中标签的指定状态
常见的伪类选择器：
1）link - 链接位访问过对应的状态（只有a标签有效 超链接有效）
2）visited - 链接以及访问过对应的状态（只有a标签有效 超链接有效）
3）hover - 鼠标悬停时的状态
4）active
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!----------------案例1：link和visted ---------------->
<a id="a1" href="http://www.baidu.com">百度</a>
<style>
#a1:link{
color: green;
}
#a1:visited{
color: red;
}
</style>
<br><br>
<!----------------案例2：hover ---------------->
<div id="box1">
<a href="http://www.baidu.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: greenyellow;
width:100px
}
button:hover{
background-color: rebeccapurple;
width:100px
}
#box1>p:hover{
/* 让光标变成手指 */
cursor: pointer;
}
#box1>p:active{
color: red;
font-size: 20px;
}
</style>
</body>
</html>
选择器优先级
<!--
1.内联样式表样式的优先级高于内部和外部（内部和外部本身没有高低之分，看选择和顺序）
2.在内部和外部样式中：权重值越高优先级越高
元素选择器 - 1
class选择器 - 2
id选择器 - 4
群组选择器看各自的权重
后代和子代的权重，各个选择器相加
3.在'!impotant'面前，选择器的优先级无意义，它对应的样式一定有效
最后排序：!important > 内联样式 > id选择器 > class选择器 > 元素选择器
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div>
<p id="p1" class="c1" style="color: red;">我是第一段落</p>
</div>
<style>
div>p{
color: deeppink;
}
#p1{
color: yellow;
}
.c1{
color: blue;
}
p{
color: green !important;
}
</style>
</body>
</html>
4391
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
