目录
css写在style里,style写在head里,title的下面
一、css常见属性
| color | 颜色 |
| font-size | 字体大小 |
| background-color | 背景颜色 |
| width | 宽度 |
| height | 高度 |
语法:
<title>Document</title>
<style>
p {
color: red;
font-size: 70px;
}
div {
color: blue;
font-size: 30px;
}
</style>
</head>
<body>
<p>一二三</p>
<p>一二三</p>
<div>二三一三二一</div>
<p>一二</p>
</body>二、css的引入方式
01.内嵌式css的写法,控制范围是当前页面,不符合结构(html)和表现(css)相分离的原则
<style>
.box {
color: blue;
font-size: 50px;
}
</style>02.外链样式表,控制范围是当前项目,结构和表现是完全分离的
| link | 链接 |
| rel | 类型 |
| stylesheet | 样式表 |
| href | 路径 |
<link rel="stylesheet" href="./hm.css">03.行内样式,控制范围是当前标签,结构和表现是完全混为一谈的
<h2 style="color: chartreuse;">这个是标题</h2>三、基础选择器
1.标签选择器
标签{css属性名:属性值}
- 选择页面上所有的同类标签
div {
color: blue;
font-size: 30px;
}2.类选择器
.类名{css属性名:属性值}
- 标签调用 class="类名''
- 一个类选择器可以被多个标签同时调用
<style>
.one{
width: 220px;
height: 200px;
background-color: red;
}
</style>3.id选择器
#id名{css属性名:属性值}
- 标签调用 id="id名"
- 同一个id选择器只能被调用一次
-
<style> #wen { color: blue; font-size: 100px; } </style> </head> <body> <div id="wen">文字</div> </body> </html>4.*通配符选择器
*通配符选择器{css属性名:属性值}
- *代表所有
- 把页面所有的标签都选择,设置相同的样式
<style>
* {
color:red;
font-size: 100px;
}
</style>四、字体和文本样式
(一)字体样式:
| font-size | 文字大小 |
| font-weight | 文字粗细 |
| font-style | 文字风格 |
| font-family | 字体类型 |
| line-height | 行高 |
| font | 文字属性连写 |
1.文字大小:font-size
-
文字大小记得带单位px
- 谷歌浏览器默认文字大小16px
font-size: 50px;2.文字粗细:font-weight
-
normal 默认值 不加粗 约等于400
- bold 加粗 约等于700
font-weight: 700;
font-weight: 400;3.文字风格:font-style
-
normal 默认值 不倾斜
- italic 倾斜
font-style: italic;4.字体类型:font-family
-
多个字体默认的解析顺序是自左而右,左边的字体先解析,解析不了的,交给后面的字体
- 多个字体用英文逗号隔开
-
英文字体写前面,中文字体写后边
-
多个单词的字体用引号引起来
-
Chrome浏览器默认字体是微软雅黑
font-family: Arial, 'microsoft yahei', sans-serif;5.行高:line-height
-
行高是:上间距 文字高度 和下间距组成 ,控制行与行之间的距离
-
默认值 normal 约等于1.1-1.3倍的文字大小
-
行高不带单位是当前标签文字大小的倍数
div {
line-height: 50px;
background-color: rgb(224, 224, 224);
}6.文字属性连写:font
-
文字大小和字体为必写项，其他项不写取默认值
-
font： style weight size/line-height family;尽量按照顺序写
p {
line-height: 300px;
font: italic 24px arial, sans-serif
}(二)文本样式:
1.首行缩进:text-indent
-
1个em相当于1个汉字的大小
<style>
p {
text-indent: 2em;
font-style: 24px;
}
</style>2.文本修饰:text-decoration
| none | 默认值 没有下划线 |
| underline | 下划线 |
| line-through | 删除线 |
| overline | 上划线 |
2.1-添加文本删除线
<style>
.box {
text-decoration: line-through;
font-size: 40px;
}
</style>
</head>
<body>
<div class="box">首都国际机场</div>
</body>2.2-删除a标签默认下划线
<style>
a {
text-decoration: none;
font-size: 60px;
}
</style>
</head>
<body>
<a href="#">超链接</a>
</body>3.文本水平对齐:text-align
-
left 左边 默认值
center 水平居中
right 右对齐
<style>
.box {
background-color: red;
text-align: center;
}
</style>4.文字标签水平居中
- a标签
-
span标签
-
img标签
-
input标签
以上标签水平居中,需要给他们的父元素设置text-align: center
<style>
.box1 {
background-color: green;
text-align: center;
}
.box2 {
background-color: red;
text-align: center;
}
.box3 {
background-color: pink;
text-align: center;
}
.box4 {
background-color: blue;
text-align: center;
}
.box5 {
background-color: yellow;
text-align: center;
}
</style>
</head>
<body>
<div class="box1">一点文字</div>
<div class="box2">
<a href="#">超链接</a>
</div>
<div class="box3">
<span>一二三</span>
</div>
<div class="box4">
<img src="./images/map.jpg" alt="">
</div>
<div class="box5">
<input type="text">
</div>
</body>5.div/p/h1-h6 水平居中
- 设置宽度
-
给自己使用margin: 0 auto;
.box {
width: 500px;
height: 500px;
background-color: pink;
margin: 0 auto;
}
