1.CSS的基本使用
1.1.css的基本语法
css样式由选择器和一条或多条以分号隔开的样式声明组成。每条声明的样式包含一个css属性和属性值。
选择器名:{
属性：属性值；
...
}
1.2注意：
1.css声明要以分号结束，声明以{}括起来
2.建议一行书写一个属性
3.若值为若干单词，则要给值加引号，如font-family:"agency fb";
1.3.css的基本使用
css的三种使用方式
1.行内样式：直接写在标签上的样式，在标签上通过style属性定义的样式
例：<h1 style="color:red;">这是一个标题</h1>
2.内部样式：定义在style标签中的样式，style标签一般设置在head标签中
例：<head>
<style>
h2{
color:green;
font-family:楷体
}
</style>
</head>
<body>
3.外部样式：定义在外部的css文件中，通过link标签引入，写在<head></head>里面.
<head>
<link rel="stylesheet" type="text/css" href="css文件的路径>
</head>
例：<link rel="stylesheet" type="text/css" href="css/style.css">
1.4.注释
注释的快捷键ctrl+/
多行注释为/*注释的内容*/
2.css选择器
2.1.基本选择器
注意：优先级是越精准优先级越高
内敛样式>id选择器>类选择器>元素选择器
1.通用选择器
选择所有：
*{
属性：属性值；
}
例：*{
color：blue;
}
2.元素选择器
选择指定标签：
元素名称{
属性：属性值；
}
例：h1{
color：red；
}
3.id选择器
选择指定id：
#id属性值：{
属性：属性值；
}
例：<div id=div1>这是一个div1</div>
#div1{
color:orange;
}
4.class选择器
选择类：
.类名：
{
属性：属性值；
}
例：<div class="div2">这是一个div2</div>
<div class="div2">这是一个div3</div>
.div2{
font-family:楷体;
}
5.分组选择器
同时选择各个标签：
选择器1，选择器2，选择器3{
属性：属性值；
}
例：h1,h2,div,#div1{
background-color:pink;
}
2.2.组合选择器
1.后代选择器（派生选择器）：
选择指定元素的所有后辈元素，以空格分隔
选择器 指定元素{
属性：属性值；
}
例：<ul class="food">
<li>
水果
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>梨</li>
</ul>
</li>
<li>
蔬菜
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>梨</li>
</ul>
</li>
</ul>
.food li{
color:green;
}
2.子代选择器：
选择指定元素的第一代子元素。以>号分隔开
选择器>指定元素{
属性：属性值；
}
例：.food>li{
border:palegoldenrod dotted 5px;
}
3.相邻兄弟选择器：
选择指定元素的下一个指定元素，两者有相同的父元素，以+号分开
选择器+指定元素{
属性名：属性值；
}
例：<div id="兄弟1">兄弟1</div>
<div>兄弟2</div>
<div>兄弟3</div>
<div>兄弟4</div>
#兄弟1+div{
color:red;
}
注意：如果相邻的没有指定元素则不做处理。
4.普通兄弟选择器：
选择指定元素后面的所有指定元素两者有相同的父元素，以波浪号隔开
选择器~指定元素{
属性名：属性值；
}
例：<div id="兄弟2">兄弟1</div>
<div>兄弟2</div>
<div>兄弟3</div>
<div>兄弟4</div>
#兄弟2~div{
color:green;
}
扫一扫
799
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
