这里写目录标题
二、CSS基本语法
格式:
选择器{属性1:值1;属性二:值2}
单位:
px->像素(pixel)、%->百分比
基本样式:
width、height、background-color
CSS注释:
/css注释内容/
<!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:100px;height:100px; background-color:red}
</style>
</head>
<body>
<div>这是一首简单的小情歌</div>
</body>
</html>
成果展示:
1.内联样式与内部样式(css样式的引入方式)
内联(行内、行间)样式:
在html标签上添加style属性来实现的
<style>
div{width:50%;height:50px; background-color:red}
</style>
</head>
<body>
<div>这是一首简单的小情歌</div>
</body>
内部样式
在
<div style="width:100px;height:100px;background-color:blueviolet">妹妹说紫色很有韵味</div>
<div style="width:50px;height:50px;background-color:blue">董</div>
<div style="width:50px;height:50px;background-color:red">双</div>
<div style="width:50px;height:50px;background-color:green">玉</div>
<!--另起一个板-->
区别:内部样式的代码可以复用、复合w3c的规范标准,进行让结构和样式分开处理
2.外部样式
引入一个单独的css文件,name,css
link标签:引入外部资源
rel属性:指定资源跟页面的关系(当前文档与被链接的关系)
href属性:资源的地址
@import:通过这种方式引入外部样式(不建议,问题很多)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,inital-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--<link rel="stylesheet" href="./common.css">-->
<title>Document</title>
<style>
@import url('./common.css');
</style>
</head>
<body>
<div>董双玉头顶的颜色就是这块的背景色
</div>
</body>
</html>
<!--制作链接:将文件模式改为。css模式-->
成果展示
3.css中的颜色表示法
1.单词表示法:red、green等
颜色的英文代码:
2.十六进制表示法:
0 1 2 3 4 5 6 7 8 9 a b c d e f
<!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{ background-color:#000000}
</style>
</head>
<body>
<div>这是一首简单的小情歌</div>
</body>
</html>
成果展示:
3.rgb三原色表示法:rgb(255,255,255)
取值范围:0~255
提取颜色的下载地址:https://www.daidufe.com/fehelper
photoshop
4.背景样式
1.background-color:背景颜色
2.background-image:背景图片
【url背景地址】
默认:会水平垂直都铺满背景图
3.background-repeat:背景图片的平铺方式
repeat-x:x轴平铺
repeat-y:y轴平铺
repeat(x,y都进行平铺,默认值)
no-repeat:都不平铺
4.background-position:背景图片的位置
x y:number (px、%)单词
x:left、center、right
y:top、center、bottom
5.background-attachment:背景图片随滚动条的移动方式
scroll:默认值(背景位置是按照当前元素进行偏移的)
fixed:(背景位置是按照浏览器进行偏移的)
<!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:3000px;height:3000px; background-color:red;
background-image:url(./img/256.jpg);/*图片位置*/
background-repeat:no-repeat ;
background-position:right center;
background-attachment: scroll /*fixed*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
5.背景实现视觉差
<!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:1400px;height:800px;background-image:url(./img/1.jpg);background-attachment: fixed;}
div{width:1400px;height:800px;background-image:url(./img/2.jpg);background-attachment: fixed;}
div{width:1400px;height:800px;background-image:url(./img/3.jpg);background-attachment: fixed;}
</style>
</head>
<body>
<div id="div2"></div>
<div id="div3"></div>
<div id="div1"></div>
</body>
</html>
6.边框样式
border-style:边框的样式
solid:实线
dashed:虚线
dotted:点线
border-width:边框的大小(px…)
border-color:边框的颜色(red,#…)
注:针对某一条边进行单独设置
(圆角边框)
<!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:300px;height:300px;border-/*right- 上下左右针对某一条边进行设置,放在中间*/style:dashed;border-color:red;
border-width:10px;}
</style>
</head>
<body>
<div></div>
</body>
</html>
成果展示:
练习.利用边框实线三角形
边框加颜色:
<!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:300px;height:300px;
border-top-style:solid;
border-top-color:green;
border-top-width:100px;
border-bottom-style:solid;
border-bottom-color:red;
border-bottom-width:100px;
border-left-style:solid;
border-left-color:blueviolet;
border-left-width:100px;
border-right-style:solid;
border-right-color:yellow;
border-right-width:100px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
成果展示:
三角形:
方法一:(将width与height设置为0,在讲其他方块颜色设置为背景色/不是白色,是与背景图相同的颜色/)
方法二:将每个方块颜色设置为透明色(transparent)
<!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:0px;height:0px;
border-top-style:solid;
border-top-color:transparent;
border-top-width:100px;
border-bottom-style:solid;
border-bottom-color:transparent;
border-bottom-width:100px;
border-left-style:solid;
border-left-color:transparent;
border-left-width:100px;
border-right-style:solid;
border-right-color:black;
border-right-width:100px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
成果展示:
7.文字样式
1.字体类型:font-family
英文、中文
衬线体与非衬线体:
区别:带衬线有棱角,非衬线体比较圆滑
注:设置多字体的方式
如果设置的字体中有空格要带上单引号
<!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{font-family:Microsoft Yahei;}
</style>
</head>
<body>
<div>心中有党,成绩理想</div>
</body>
</html>
成果展示:
2.字体大小:font-size(16px默认像素)
第一种:输入像素数字大小(00px)
第二种:有英文形式:
<!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{font-size: 50px;}
</style>
</head>
<body>
<div>我怀念的是无话不说</div>
</body>
</html>
成果展示:
3.字体粗细:font-weight
模式:正常(normal)、加粗(bold)
写法:单词(normal、bold)/number(100 200…500都是正常的,600…900都是加粗的)/
4.字体样式:font-style
模式:正常(默认)、斜体(italic)
/*oblique也是表示斜体,用的比较少,一般了解即可,没什么差别 */
区别:(1.)italic:带有属性倾斜字体的才可以设置倾斜操作。
(2.)oblique:没有倾斜属性的字体也可以设置倾斜操作
8.css段落样式——文本修饰
text-decoration:文本修饰
下划线:underline
删除线:line-through
上划线:overline
<!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>
p{width:300px;text-decoration: line-through;/*添加多个修饰中间直接用空格隔开*/}
</style>
</head>
<body>
<p>每个优秀的人的心中都有一段沉默的时光,那段时光是付出了很多努力,却得不到结果的日子,我们把它叫做扎根</p>
</body>
</html>
成果展示
9.css段落样式——文本大小写
text-transform:文本大小写(针对英文段落)
小写:lowercase
大写:uppercase
只针对首字母:capitalize
10. css段落样式——文本缩进
text-indent:文本缩进(一个文字16px——对齐)
首行缩进的效果
em相对单位:相对单位,1em永远与字体大小相同
对齐方式:left、right、center、justify(两端点对齐)
p{ text-align:left: ;}/*调节左右对齐*/
11.css段落样式——定义行高
line-height:
定义:一行文字的高度
默认:不是固定值,而是变化的。根据当前字体大小在不断的变化。
取值:1.number(px)|scale(比例值,跟文字大小成比例的)
p{ line-height:30px ;}
12.css段落样式——字间距与词间距
1.letter-spacing:定义字间距
2.Word-spacing:词之间的间距(针对英文段落)
3.强制折行:(针对英文、数字不自动折行)
(1.)word-break:break-all;(非常强烈的折行)
(2.)word-wrap:break-word;(不是那么强烈的折行,会产生空白区域)
13.css复合样式
一个css属性只控制一种样式,叫做单一样式
一个css属性控制多种样式,叫做复合样式(background、border、font)
复合的写法:是通过空格的方式实现的。复合写法有的是不需要关心顺序,例如background、border;有的是需要关心顺序,例如font
14.css选择器——id
1.ID选择器: