一. css基本语法
1.css代码写在哪儿
内联样式表:将css代码写在标签的style属性中
内部样式表:将css代码写在style标签中
外部样式表:将css代码写在外部的css文件中,然后在html中通过link标签来导入
2.css语法
1)语法
选择器{属性名1:属性值1;属性名2:属性值2;属性名3:属性值3;...}
2)说明
选择器 - 选中当前需要添加样式的标签(在内联样式表中'选择器{}'需要省略)
属性 - 属性名有哪些是固定的(不同的样式有对应的固定属性);
属性值如果表示的是数值大小必须加单位:px
多个属性之间必须用分号隔开
3.选择器
1)id选择器 - 在id属性值前加
例如:
2)类选择器 - 在class属性前加.作为一个选择器,选中class属性是指定值
例如:.c1 - 选中class属性是c1的所有标签
3)元素选择器 - 直接将标签名作为选择器,选中所有指定的标签
例如:p{} - 选中当前页面中所有的p标签
4)群组选择器 - 将多个选择器用逗号隔开作为一个选择器,选中每个选择器选中的标签
p,a,.c2{} - 选中所有的p标签,所有的a标签和所有class是c2的标签
5)后代选择器 - 将多个选择器用空格隔开
例如:div p{} - 选中直接或者间接包含在div标签中的p标签
.c1 p{} - 选中直接或者间接包含在class是c1的标签中的p标签
div .c1 p{} - 选中包含在div中的class是c1中的p标签
6)子代选择器 - 将多个选择器用>隔开
例如:div>p{} - 选中直接包含在div标签中的p标签
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 内部样式 -->
<style type="text/css">
#box1{
color: coral;
background-color: green;
font-size: 30px;
font-weight: 100;
width: 120px;
height: 100px;
}
.c1{
color: deeppink;
border-top: solid purple 5px;
border-bottom: dotted purple 3px;
}
p{
text-decoration: underline;
}
a{
text-decoration: none;
}
.c1,#box1{
background-color: pink;
border-bottom-left-radius: 30px;
border-top-right-radius: 30px;
}
div p{
text-align: center;
}
div>p{
background-color: skyblue;
}
</style>
<!-- 外部样式 -->
<link rel="stylesheet" type="text/css" href="./css/css基础语法.css">
</head>
<body>
<!-- 内联样式 -->
<p style="color: red;">我是段落1</p>
<div id="box1">我是dic1</div>
<img src="img/logo-201305-b.png" >
<a href="" class="c1 ">我是超链接1</a>
<p class="c1">我是段落2</p>
<input type="text" name="" id="" value="" />
<div id="">
<a href="">我是超链接2</a>
<p>我是段落3</p>
<span class="c1">我是span1</span>
<div>
<span>
<p>我是段落4</p>
</span>
</div>
</div>
</body>
</html>