软测的了解前几个就ok。
二、CSS样式属性
基本样式先介绍俩:
width : 宽
height : 高
长度单位 :
1. px -> 像素
2. % -> 百分比
外容器1 -> 600px 当前容器 50% -> 300px
外容器2 -> 400px 当前容器 50% -> 200px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width : 25% ; height : 100px ; background-color: red }
/* span{ background-color:blue;} */
</style>
</head>
<body>
<div>这是一个块</div>
<div>又是一个块</div>
<span>这是一个内联</span>
</body>
</html>
2.1 CSS文字样式
注:
-font-family:
1.英文字体(例:Arial)只针对英文文本,中文字体(例:微软雅黑)对英文/中文都会起作用。
2.代码里经常设置多个字体类型,其实就是备选方案,实际哪个显示出来以每个人的电脑适配为主。
3.有的字体类型要用双引号包裹起来,是因为其中出现空格,例如“TImes New Roman”,而Cambria就不需要双引号。
-font-size:
1.除了通过像素px设置,还可以通过单词;medium默认是16px;这种方法了解即可
2.字体大小一般设为偶数,母的:更好的实现文字对齐
-font-weight:
1.通过设置数值 (100,200,300,……900) 100到500都是正常的,600-900是加粗的
2.通过单词:正常(normal) 加粗(bold)
-font-style:
1.通过单词:正常(normal) 斜体(italic) 这俩用的多
oblique也表示斜体,用的较少,了解即可。区别在于:1)italic 带有属性倾斜字体的才可以设置倾斜操作。2)oblique 没有倾斜属性的字体也可以设置请写操作。
当选择器样式表和类样式表做结合,共有的属性会做覆盖(后者覆盖前者),不同的属性会做融合。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>样式表03</title>
<style>
p {
font-size: 20px;font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;text-align: left;}
.test02 {
color: violet;font-size: 40px;}
</style>
</head>
<body>
这是没有任何修饰的第一句话<br><br>
<p>我是有修饰的第二句话</p>
<p class="test02">我是有修饰的第三句话</p>
</body>
</html>
2.2 CSS背景样式
background-color 背景色
background-image 背景图
url(背景地址)
默认:会水平垂直都铺满背景图
background-repeat 平铺方式
repeat-x x轴平铺
repeat-y y轴平铺
repeat ( x , y 都进行平铺,默认值 )
no-repeat 都不平铺
background-position : 背景位置
x y : number(px、%) | 单词
x : left、center、right
y : top、center、bottom
background-attachment : 背景图随滚动条移动的方式
scroll : 默认值 ( 背景位置是按照当前元素进行偏移的 )
fixed ( 背景位置是按照浏览器进行偏移的 )
注:对比html中颜色bgcolor和背景background:html会对尺寸不合的图片直接重叠显示,直接填充满。而css样式表中可以指定图片的平铺方式。和img标签的区别:img标签一般用来展示;背景图一般用来作装饰性图片。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景</title>
<style type="text/css">
body {
background-color:pink;}
h3 {
background-color: plum;}
</style>
</head>
<body>
<h3>我是h3标签</h3>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景</title>
<style type="text/css">
body {
background-image: url(./img/qing.png);background-repeat: repeat-x;}
</style>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name