CSS和HTML语法
- 1.CSS概述
- 概念:Cascading style Sheets 层叠样式表
- 好处
- 2.CSS与HTML结合方式
- 1.内联样式
- 2.内部样式
- 3.外部样式
- 3.CSS语法格式
- 4.CSS选择器(基础选择器)
- 1.id选择器
- 2.元素选择器
- 3.类选择器
- 5.CSS选择器(扩展选择器)
- 1.选择所有元素
- 2.并集选择器
- 3.子选择器:筛选选择器1下的选择器2元素
- 4.父选择器:筛选选择器2的父元素选择器1
- 5.属性选择器:选择元素名称,属性名=属性值的元素
- 6.伪类选择器:选择一些元素具有的状态
- 6.CSS属性
- 1.字体、文本
- 2.背景:background
- 3.边框
- 4.尺寸
- 5.盒子模型:控制属性
- 1.margin:外边距
- 2.padding:内边距
- 3.float:浮动
1.CSS概述
页面美化和布局控制
概念:Cascading style Sheets 层叠样式表
层叠:多个样式可以作用在同一个html元素上,同时生效
好处
1.功能强大
2.将内容展示和样式控制分离
降低耦合,解耦。
让分工协作更容易
提高开发效率
2.CSS与HTML结合方式
三种方式:
1.内联样式
在标签内使用style属性指定css代码
<div style="color:red;">hello</div>
2.内部样式
在head标签内,定义style标签,style标签的标签体内容就是css代码
<head>
<style>
div{
coloe:blue;
}
</style>
<div>hello</div>
</head>
3.外部样式
1.定义css资源文件
2.在head标签内,定义link标签,引入外部的资源文件
在a.css文件中
div{
color:green;
}
在html文件中
<link rel="stylesheet" href="css/a.css">
<div>hello</div>
<div>hello</div>
注意:
1.三种方式中,css作用范围越来越大
2.一不常用,后期常用二三。
3.第三种格式可以写为:
<style>
@import "css/a.css";
</style>
3.CSS语法格式
格式:
选择器{
属性名1:属性值1;
属性名2:属性值2;
…
}
选择器:筛选具有相似特征的元素
注意:每一对属性需要使用;隔开,最后一对属性可以不加;
4.CSS选择器(基础选择器)
1.id选择器
选择具体的id属性值的元素,建议在一个html页面中id唯一
语法:#id属性值()
<head>
<style>
#div1{
color:red;
}
</style>
</head>
<body>
<div id="div1">麦克斯韦</div>
<div>小迷妹</div>
</body>
2.元素选择器
选择具有相同标签名称的元素
语法:标签名称{}
注意:id选择器优先级高于元素选择器
<head>
<style>
#div1{
color:red;
}
div{
color=green;
}
</style>
</head>
<body>
<div id="div1">麦克斯韦</div>
<div>小迷妹</div>
</body>
3.类选择器
选择具有相同的class属性值的元素
语法:.class属性值()
注意:类选择器优先级高于元素选择器
<head>
<style>
#div1{
color:red;
}
div{
color=green;
}
.clsl{
color:blue;
}
</style>
</head>
<body>
<div id="div1">麦克斯韦</div>
<div>小迷妹</div>
<p class="clsl">李晶</p>
</body>
结局: id选择器优先级最高
5.CSS选择器(扩展选择器)
1.选择所有元素
语法:
2.并集选择器
语法:选择器1,选择器2{}
3.子选择器:筛选选择器1下的选择器2元素
语法:选择器1 选择器2{ }
<head>
<style>
div p{ //div下的p标签 麦克斯韦就不会生效
color:red;
}
</style>
</head>
<div>
<p>lijing</p>
</div>
<p>麦克斯韦</P>
4.父选择器:筛选选择器2的父元素选择器1
语法:选择器1>选择器2{ }
<head>
<style>
div>p{ //对div的控制
border: 1px solid;
}
</style>
</head>
<div>
<p>lijing</p>
</div>
<p>麦克斯韦</P>
<div> mm</div> //不会被选中 因为不是父元素
5.属性选择器:选择元素名称,属性名=属性值的元素
语法: 元素名称[属性名=“属性值”]{ }
<head>
<style>
input[type='text']{
border: 5px solid;
}
</style>
</head>
<input type="text">
6.伪类选择器:选择一些元素具有的状态
语法:元素:状态{ }
如:
状态:
link:初始化的状态
visited:被访问过的状态
active:正在访问的状态
hover:鼠标悬浮状态
<head>
<style>
a:link{
color:pink;
}
a:hover{
color:green;
}
a:active{
color:yellow;
}
a:visited{
color:red;
}
</style>
</head>
<a href="#">麦克斯韦</a>
6.CSS属性
1.字体、文本
font-size:字体大小
color:文本颜色
text-align:对齐方式
line-height:行高
<style>
p{
color:#FF0000;
font-size:30px;
text-align:center;
line-height:100px;
}
</style>
2.背景:background
<style>
p{
color:#FF0000;
font-size:30px;
text-align:center;
line-height:100px;
border:1px solid red;
}
div{
border:1px solid red;
height:200px;
width:200px;
background:url("img/logo.jpg"); no-repeat center; //背景
}
</style>
3.边框
border:复合属性,每一条线都可以单独控制(borde-left-style)
<style>
p{
color:#FF0000;
font-size:30px;
text-align:center;
line-height:100px;
border:1px solid red; //边框
}
</style>
4.尺寸
width:宽度
height:高度
<style>
p{
color:#FF0000;
font-size:30px;
text-align:center;
line-height:100px;
border:1px solid red;
}
div{ //尺寸
border:1px solid red;
height:200px;
width:200px;
}
</style>
5.盒子模型:控制属性
1.margin:外边距
2.padding:内边距
<style>
div{
border:1px solid red;
}
div1{
width:100px;
height:100px;
// margin:50px; 外边距
}
div2{
width:200px;
height:200px;
// padding:50px; 不可以!!!默认情况下会影响盒子的大小 内边距
//设置盒子的属性:让width和height就是最终盒子的大小
box-sizing:border-box;
}
</style>
<body>
<div class="div2">
<div class="div1"></div>
</div>
</body>
3.float:浮动
left:左浮动
right:右浮动
<style>
div{
border:1px solid red;
}
div1{
width:100px;
height:100px;
// margin:50px; 外边距
}
div2{
width:200px;
height:200px;
// padding:50px; 不可以!!!默认情况下会影响盒子的大小 内边距
//设置盒子的属性:让width和height就是最终盒子的大小
box-sizing:border-box;
}
.div3{
float:left;
}
.div4{
float:left;
}
.div5{
float:right;
}
</style>
<body>
<div class="div2">
<div class="div1"></div>
</div>
<div class="div3">aaaaa</div>
<div class="div4">bbbbbb</div>
<div class="div5">cccc</div>
</body>