CSS
目录
background-attachment::背景图随滚动条的移动方式
div与span
div:划分区域
span:修饰文字
<div>
<h2><a href="#"><span>怪奇物语</span>(美国2016年NETFLIX出品的科幻惊悚剧)
_百度百科</a></h2>
<a href="#"><img src="" alt=""></a>
<p>《怪奇物语》(Stranger Things),
是美国NETFLIX公司制作一部的主打科幻惊悚的美剧。
该剧由年轻的类型片电影制作人Matt Duffer和Russ Duffer编剧并执导,
由Shawn Levy担任执行制作人,
薇诺娜·瑞德,大卫·哈伯,菲恩·伍法德 ,米莉·波比·布朗等人主演。
本剧故事设定在上世纪80年代,印第安纳州霍金斯 ...</p>
</div>
CSS语法格式
格式:选择器(属性1:值1;属性二:值2)
单位:px(像素)、%
基本样式:width、background-color、height
<head>
<meta charset="utf-8">
<title></title>
<style>
div{ width: 100px; width: 100px; background-color: red;}
</style>
</head>
<body>
<div></div>
</body>
内联样式与内部样式
内联:html标签上添加style
内部(可复用):在<style>标签内添加
<body>
<div style="width: 100px; width: 100px; background-color: red"></div><!-- 内部 -->
</body>
<style>
div{ width: 100px; width: 100px; background-color: red}/* 内联 */
</style>
</head>
<body>
<div>A</div>
<div>B</div>
</body>
外部样式及两种写法
引入单独css文件
1.通过link标签引入外部资源,rel属性指定资源跟页面的关系,href属性资源的地址
2.通过@import引入
div{ width: 100px;height: 100px;background-color: red}外部css
<meta charset="utf-8">
<link rel="stylesheet" href="new_file.css">
<title></title>
<style>
@import url(new_file.css);
</style>
CSS颜色表示法
输入方法
单词表示法:red
十六进制表示法:#000000
rgb三原色表示法:rgb(255,255,255)取值范围0~255
获取色值办法
拾色器软件
PS
背景样式
background-color:背景颜色
background-image:背景图片(url)(默认全铺)
background-repeat(repeat-x repeat-y no-repeat repeat):背景图片的平铺方式
background-position:背景图片的位置
x y:number(px、%)、单词
x:left、center、right
y:top、center、bottom
background-attachment::背景图随滚动条的移动方式
scroll(背景按照当前元素进行偏移)
fixed(背景位置按照浏览器进行偏移)
多背景图操作
背景实现视觉差效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#div1{ width: 1400px;height: 800px;background-image: url(./EL.jpg);
background-attachment: fixed;}
#div2{ width: 1400px;height: 800px;background-image: url(./11.jpg);
background-attachment: fixed;}
#div3{ width: 1400px;height: 800px;background-image: url(./jane.jpg);
background-attachment: fixed;}
</style>
</head>
<body>
<div id="div1">
<div>
<h2><a href="#"><span>怪奇物语</span>(美国2016年NETFLIX出品的科幻惊悚剧)
_百度百科</a></h2>
<a href="#"><img src="" alt=""></a>
<p>《怪奇物语》(Stranger Things),
是美国NETFLIX公司制作一部的主打科幻惊悚的美剧。
该剧由年轻的类型片电影制作人Matt Duffer和Russ Duffer编剧并执导,
由Shawn Levy担任执行制作人,
薇诺娜·瑞德,大卫·哈伯,菲恩·伍法德 ,米莉·波比·布朗等人主演。
本剧故事设定在上世纪80年代,印第安纳州霍金斯 ...</p>
</div>
</div>
<div id="div2">
<form action=""><!-- 提交地址 -->
<h2>输入框:</h2>
<input type="text" placeholder="请输入密码">底<!-- 层提示信息 -->
<h2>密码框:</h2>
<input type="password">
<h2>复选框</h2>
<input type="checkbox" checked>牛蛙<!-- 一开始被选中 -->
<input type="checkbox" checked>虾滑
<input type="checkbox" disabled>和牛<!-- 禁止使用 -->
<h2>单选框</h2>
<input type="radio" name="gender">基围虾
<input type="radio" name="gender">黑虎虾
<h2>上传文件</h2>
<input type="file">
<h2>提交按钮和重置按钮</h2>
<input type="submit">
<input type="reset">
</form>
</div>
<div id="div3">
<table border="1" cellpadding="30" cellspacing="30">
<caption>天气预报</caption>
<tHead>
<tr align="right">
<th colspan="2">日期</th>
<th>天气情况</th>
<th>出行情况</th>
</tr>
</tHead>
<tBody>
<tr>
<td>2022-6-21</td>
<td>清晨</td>
<td><img src="./EL.jpg" alt=""></td>
<td>天气晴朗</td>
</tr>
</tBody>
</table>
</div>
</body>
</html>
边框样式
border-style:边框的样式
border-width:边框的大小
border-color:边框的颜色
边框可以针对某一边进行单独设置(border加l、r、t、p)
div1{width: 300px;height: 300px;
border-style: solid;border-color: red;
border-width: 1px;}
div2{width: 300px;height: 300px;
border-right-style: dotted;border-left-color: black;
border-bottom-width: 10px;}
边框实现三角形
透明颜色:transparent
div{width: 0px;height: 0px;
border-top-color:transparent ;
border-top-style: solid;
border-top-width:30px ;
border-right-color:transparent ;
border-right-style: solid;
border-right-width:30px ;
border-bottom-color:transparent ;
border-bottom-style:solid;
border-bottom-width:30px ;
border-left-color:blue ;
border-left-style: solid;
border-left-width:30px ;}
family字体类型
字体类型:font-family
英文:Arial、Times New Roman(空格需要加引号)
中文:宋体(SimSun)
多字体可以让计算机识别更多
衬线体与非衬线体
div{font-family: 'Times New Roman',楷体;}
字体大小粗细样式
font-size(字体大小一般为偶数)默认16px
font-weight:正常、加粗(bold、normal、数值100~500正常,600~900加粗)
font-style:正常、斜体(normal、italic/oblique)
color
文本修饰与文本大小写
text-decoration:文本装饰 underline line-through overline(下划线、删除线、上划线)
text-transform:英文段落文本大小写(lowercase uppercase capitalize 小写、大写、只针对首字母大写)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p{text-decoration: underline line-through overline; /* 添加多个文本修饰通过空格隔开 */
text-transform: lowercase uppercase capitalize;}
</style>
</head>
<body>
<p>本剧故事设定在上世纪80年代,印第安纳州霍金斯小镇上的一个男孩神秘失踪,
他的朋友、
家人以及当地的警察开始寻找答案,随着拥有超能力的女孩Eleven的出现,
一个关于秘密实验和超自然力量的神秘事件被逐渐揭开。</p>
</body>
</html>
文本缩进与文本对齐
首行缩进:text-indent(em相对缩进、不适合中英混搭)
文本对齐方式:text-align: right center left justify(两端对齐)
p{text-indent: 2em;
text-align: right center left justify;}
文本的行高
第一行文字的下边距=第二行文字的上边距
行高:line-height(默认不是固定值)px、scale(比例值,跟文字大小成比例)
文本间距与英文折行
字体间距:letter-spacing
词间距(针对英文):word-spacing
强制折行(针对英文、数字):word-wrap: break-word(非常强烈的折行)word-break: break-all(不是那么强烈的折行,会产生空白区域)
p{letter-spacing: 2;
word-spacing: 10px;}
div{word-wrap: break-word;
word-break: break-all;}
css复合样式
通过空格实现复合、先写复合再写单一
无需关心顺序
background:red url() repeat 0 0;
border:border-right: 2px black solid
需要注意顺序
font(至少要有两个值size family按顺序):font: 30px 宋体
weight style size/line-height family
div{background: red url(./EI.jpg) no-repeat center center;
border-right: 2px black solid;
font: bold italic 30px/100px 宋体;}