一、HTML中使用CSS
CSS 用于控制网页的样式和布局。单独使用CSS是没有意义的,它需要在html中使用,使用css有3种方式:
CSS代码:
/*index.css*/
h2 {
font-size: 30px;
}
HTML代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="index.css">
<style>
h1 {
font-size: 16px;
}
</style>
</head>
<body>
<a href="#" style="font-size: 50px; cursor: auto;">点我</a>
<h1>我是h1</h1>
<h2>我是h2</h2>
</body>
</html>
运行效果:
二、选择器
id选择器
在html中,id这个属性是唯一的,不可以重复,id不能为纯数字;使用 #id 选择标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页标题</title>
<style>
#s1 {
font-size: 60px;
}
/*单个*/
#s2 {
font-size: 30px; /*字体大小*/
}
/*多个,逗号隔开*/
#s1,#s2{
background-color: aqua; /*背景颜色*/
cursor: cell; /*鼠标样式*/
}
</style>
</head>
<body>
<a href="#" id="s1">这是s1的样式</a>
<br><br><br>
<a href="#" id="s2">这是s2的样式</a>
</body>
</html>
运行效果:
class选择器
类选择器,就是选择同一种类型的标签。使用 .class_name 选择标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页标题</title>
<style>
#s1 {
font-size: 60px;
}
/*单个*/
#s2 {
font-size: 30px; /*字体大小*/
}
.cla{
text-decoration: none;
/* 取消a标签的下划线 */
}
/*多个逗号隔开*/
.cla,.jys{
width: 100px;
height: 100px;
background-color: #00ffcc;
}
</style>
</head>
<body>
<a href="#" id="s1" class="cla">这是s1+cla的样式</a>
</br>
<a href="#" id="s2" class="cla">这是s2+cla的样式</a>
</br>
<button class="jys">这是一个按钮是jys的样式</button>
</body>
</html>
运行效果:
?标签选择器
选择一个或多个标签来加样式,同类型所有的标签都会影响
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#s1 {
font-size: 60px;
}
/*单个*/
#s2 {
font-size: 30px; /*字体大小*/
}
a{
text-decoration: none;
/* 取消a标签的下划线 */
}
/*多个逗号隔开*/
a,button{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<a href="#" id="s1" class="qdxhx">点我</a>
</br>
<a href="#" id="s2" class="qdxhx">点我2</a>
</br>
<button class="jys">我是一个按钮</button>
</body>
</html>
运行效果:
组合选择器
组合选择器可以把上面几种选择器组合起来使用
<!DOCTYPE html>
<!--声明html类型-->
<html>
<head>
<meta charset="UTF-8">
<title>网页标题</title>
<style>
/*多个逗号隔开*/
#div1 {
width: 200px;
/*宽度*/
height: 200px;
/*高度 */
background-color: aqua;
}
#div2 {
width: 200px;
/*宽度*/
height: 200px;
/*高度 */
background-color: green;
}
/*div1 下面的a标签*/
#div1 a {
cursor: cell;
}
#div2 .qdxhx {
text-decoration: none;
}
/*属性选择器*/
button[type]{
height: 50px;
}
button[type=submit]{
background-color: red;
}
</style>
</head>
<body>
<div id="div1">
<a href="#" >点这里</a>
</br>
</div>
<br>
<br>
<br>
<div id="div2">
name:<input type="text">
</br>
<a href="#" >点我</a>
</br>
<button type="submit">我是一个按钮</button>
<button type="reset">我是一个按钮reset</button>
</div>
</body>
</html>
运行效果:
三、css常用属性
所有属性查询文档 CSS 教程 | 菜鸟教程
名称 | 作用 | 值 | 备注 |
width | 宽 | Npx | |
height | 高 | Npx | |
border | 边框 | Npx,边框类型 | CSS Border(边框) | 菜鸟教程 |
background-color | 背景颜色 | 颜色代码 | |
background-image | 背景图片 | 图片url | |
background-size | 背景图片大小 | 两个值 宽和高的px | |
margin | 外边距 | Npx,可以传1个,可以传4个 | CSS margin(外边距) | 菜鸟教程 |
margin-left、margin-right、margin-bottom、margin-top | 上下左右外边距 | Npx | |
padding | 内边距 | Npx,可以传1个,可以传4个 | CSS padding(填充) | 菜鸟教程 |
padding-left、padding-right、padding-bottom、padding-top | 上下左右内边距 | Npx | |
font-size | 字体大小 | Npx | |
text-align | 文字对齐方式 | right、left、center | |
line-height | 行高 | Npx、百分比 | |
display | 改变元素类型 | none、block、inline、inline-block | |
position | 元素定位 | absolute、fixed、relative | |
z-index | 显示优先级 | 整数/负数,数字越大优先级越高 | |
overflow | 控制内容溢出元素框时显示的方式 | hidden、scroll、auto | |
float | 块级元素浮动 | left、right |
更多推荐
CSS基础知识
发布评论