CSS是层叠样式，CSS主要用于设置页面的文本内容，图像外形，版面布局，外观显示。
-
CSS语法规范：由选择器和一条或多条声明样式组成。如 h1 { color:red; font-size:25px }
-
选择器就是CSS样式的HTML标签
-
属性之间采取“ 键值对”形式表示
-
属性与属性值之间用“ ：”分开
-
每一组键值对之间使用“ ；”分开
-
-
CSS书写风格
-
书写样式格式
-
紧凑型
-
展开型格式（ 一行一个属性）推荐使用
-
-
样式大小写
-
小写字母书写样式
-
-
空格规范
-
属性与属性值之间 使用 冒号＋空格隔开
-
选择器与“{”之间也使用空格隔开
-
代码
<!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>Document</title> <style> /* 选择器{样式} */ /* 给谁改样式{改什么样式} */ p { color: red ; /* 修改文字大小为12像素 */ font-size: 12px; } </style> </head> <body> <p>有点意思</p> </body> </html> -
结果
-
-
-
CSS基础选择器
-
选择器的作用：选择标签 再对标签设置样式
-
-
选择器分类
-
基础选择器
-
标签选择器
-
用HTML标签名称作为选择器
-
语法： 标签名 { 属性1： 属性值； 属性2： 属性值； }
-
可以把 同一类型的标签 全部设置为 同一样式
-
代码
<!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>Document</title> <style> p { color: green; } div { color: pink; } </style> </head> <body> <p>男生</p> <p>男生</p> <p>男生</p> <div>女生</div> <div>女生</div> <div>女生</div> </body> </html> -
结果
-
-
类选择器
-
单独选择 某个标签
-
语法： .red { color: red } 再在结构里面调用 <li class="red">变红色</li>
-
类选择器使用“.”进行标识，后面紧跟类名（可以自己定义不同类名）
-
类名名字过长可以使用“-”进行分割，类名使用英文字母
-
有各种常用的类名命名规范（ 待补充链接）
-
代码
<!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>Document</title> <style> /* 类选择口诀：样式点定义，结构类（class）调用 ，一个或多个都可以使用 */ .red { color: red; } </style> </head> <body> <ul> <li class="red">冰雪</li> <li>雪花</li> <li class="red">啤酒</li> </ul> </body> </html> -
结果
-
-
类选择器多类名
-
语法：<div class=" red font20">亚瑟</div>
-
class可以有 多个类名，之间必须 用空格隔开
-
可以把相同的元素样式放在一个类里面
-
代码
<!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>Document</title> <style> .red { color: red; } .font35 { font-size: 35px; } </style> </head> <body> <div class="red font35" >蛋蛋</div> </body> </html> -
结果
-
-
id选择器
-
id属性来设置id选择器，以#来定义
-
语法: #id名 { 属性1：属性值1； } 如：#nav { color: red;} 调用id="nav"
-
id选择器口诀：样式通过#来定义，结构通过id调用， 只能调用一次，其他标签不允许再次使用。用于页面的唯一元素上。
-
代码
<!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>Document</title> <style> #pink { color: pink; } </style> </head> <body> <div id="pink">晴朗</div> <div>下雨</div> </body> </html> -
结果
-
-
通配符选择器
-
选取页面中 所有的元素（标签）
-
语法: * { 属性1： 属性值1 } 如 * {margin: 0; padding: 0;}
-
不需要调用直接出现效果
-
代码
<!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>Document</title> <style> * { color: red; } /* 以下标签都改为了红色 后面不需要调用*/ </style> </head> <body> <div>我的</div> <span>你的</span> <ul> <li>还是我的</li> </ul> </body> </html> -
结果
-
-
-
CSS字体属性
-
字体属性
-
用于定义字体系列，大小，粗细，倾斜
-
css使用 font-family属性定义 文本字体
-
各个字体之间使用英文状态下的逗号隔开
-
空格隔开的多个单词组成的字体加一个引号括起来
-
常见字体“Microsoft-family”,Arial
-
代码
<!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>Document</title> <style> h2 { font-family: '微软雅黑'; } p { font-family: 'Microsoft YaHei',Arial, Helvetica, sans-serif; } </style> </head> <body> <h2>秘密</h2> <p>颜色</p> <p>困难</p> <p>嘱托</p> </body> </html> -
结果
-
-
字体大小
-
css使用 font-size
-
语法 p { font-size: 20 px}
-
px像素是网页常见的单位，谷歌默认大小为16px，不同浏览器之间不同
-
可以给body指定整个页面文字大小，标题需要单独指定文字大小
-
代码
<!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>Document</title> <style> body { font-size: 16px; } /* 标题标签比较特殊需要 单独指定文字大小 */ h2 { font-size: 16px; } </style> </head> <body> <h2>秘密</h2> <p>颜色</p> <p>困难</p> </body> </html> -
结果
-
-
字体粗细
-
css使用 font-wigth属性设置文字粗细
-
加粗 效果：先在style 里面设置.bold { font-wigth: bold；}再在标签内调用class=“bold” 也可以用数字700表示（数字 后面没有单位 ）
-
普通 效果：.h2 { font-wigth:normal;} 也可以用 数字 400表示 （数字 后面没有单位）
-
代码
<!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>Document</title> <style> .bold { /* 文字加粗 */ font-weight: 700; /* 等价情况 */ /* font-weight: bold; */ } h2 { /* 文字普通显示 */ font-weight: 400; /* 等价于 */ /* font-weight: normal; */ } </style> </head> <body> <h2>秘密</h2> <p>颜色</p> <p class="bold">困难</p> </body> </html> -
结果
-
-
文字样式
-
css用 font-style设置文本风格
-
斜体字：itali
-
正常字体：normal 如将em倾斜标签变正
-
代码
<!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>Document</title> <style> p { /* 倾斜样式 */ font-style: italic; } em { /* 将倾斜的字体变正 */ font-style: normal; } </style> </head> <body> <p>上课时候的你</p> <em>下课时候的你</em> </body> </html> -
结果
-
-
复合属性
-
body { font: font-style font-weigth font-size/line-height font-family}
-
顺序不能颠倒，按照样式、粗细、大小、字体排列，中间使用空格隔开
-
必须保留font-size 和font-family属性，（字号和字体属性必须保留）其他可以省略
-
代码
<!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>Document</title> <style> /* 将div文字变倾斜，加粗，字号设置为16像素。并且是微软雅黑 */ div { font-style: italic; font-weight: 700; font-size: 16px; font-family: 'Microsoft YaHei'; /* 不能随意颠倒位置 */ /* font: font-style font-weigth font-size/line-heught font-family ; */ font: italic 700 16px 'Microsoft YaHei'; } </style> </head> <body> <div> 三生三世十里桃花，一心一意百行代码 </div> </body> </html> -
结果
-
-
-
css文本属性
-
如文本外观，文本的颜色，对齐文本，装饰文本，文本缩进
-
颜色使用color
-
语法：div { color: red;}
-
十六进制颜色： color: #ff0000;
-
RGB代码表示颜色：color ： rgb（200,0,0）；
-
代码
<!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>Document</title> <style> div { /* color: pink; */ /* color:#00ffea; */ color: rgb(255, 0, 128); } </style> </head> <body> <div>中文</div> </body> </html> -
结果
-
-
对齐文本
-
text-align设置 水平对齐方式
-
语法 div { text-align: center;}
-
代码
<!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>Document</title> <style> h1{ /* 本质是盒子里面的文字水平居中对齐 */ /* text-align: center; */ /* text-align: left; */ text-align: right; } </style> </head> <body> <h1> 居中对齐的标题 </h1> </body> </html> -
结果
-
-
装饰文本
-
text-decoration属性给文本添加 上划线、下划线、删除线
-
语法：div { text-decoration:属性值;}
-
属性值可以是： none，无线
-
属性值可以是： underline下划线
-
属性值可以是：overline上划线
-
属性值可以是：line-throngh删除线
- 代码
<!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>Document</title> <style> div { /* 下划线 */ /* text-decoration: underline; */ /* 删除线 */ /* text-decoration: line-through; */ /* 上划线 */ text-decoration: overline; } a { /* 取消下划线 */ text-decoration: none; } </style> </head> <body> <div>粉红色的会议</div> <a href="#">粉红色的会议</a> </body> </html> - 结果
-
-
文本缩进
-
text-indent指定文本 段落首行缩进
-
div { text-indent: 10px;}
-
em相对单位，就是当前元素的一个文字大小，
-
代码
<!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>Document</title> <style> p { font-size: 24px; /* text-indent: 20px; */ /* 如果此时写了2em，则是此时两个单位文字大小 */ text-indent: 2em; } </style> </head> <body> <p>打开北京、上海与广州的地铁地图，你会看见三张纵横交错的线路网络，这代表了中国最成熟的三套城市轨道交通系统。</p> <p>可即使这样，在北上广生活的人依然少不了对地铁的抱怨，其中谈及最多的问题便是拥挤——对很多人而言，每次挤地铁的过程，都像是一场硬仗。更何况，还都是败仗居多。</p> <p> 那么，当越来越多的二线甚至三线城市迎接来了自己的地铁，中国哪里的地铁是最拥挤的呢？</p> </body> </html> -
结果
-
-
行间距
-
line-heigth用于控制文字行与行之间的距离
-
语法：p { line-heigth:26px;}
-
代码
<!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>Document</title> <style> div { line-height: 16px; } p { line-height: 25px; } </style> </head> <body> <div>中国人</div> <p>打开北京、上海与广州的地铁地图，你会看见三张纵横交错的线路网络，这代表了中国最成熟的三套城市轨道交通系统。</p> <p>可即使这样，在北上广生活的人依然少不了对地铁的抱怨，其中谈及最多的问题便是拥挤——对很多人而言，每次挤地铁的过程，都像是一场硬仗。更何况，还都是败仗居多。</p> <p> 那么，当越来越多的二线甚至三线城市迎接来了自己的地铁，中国哪里的地铁是最拥挤的呢？</p> </body> </html> -
结果
-
-
-
css引入方式
-
内部样式表
-
<style>标签放在<head>标签中
-
优点：可以控制 整个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>Document</title> <style> div { color: pink; } </style> </head> <body> <div>所谓内部样式表,就是在html页面内部写格式,但是单独写到style标签内部</div> </body> </html> -
结果
-
-
行内样式表（嵌入式引用）
-
指在元素标签内部的style属性中设定css样式
-
例如<div style="color: red; font-size: 12px;">正在加载jjj</div>
-
style写在 标签内部，就是标签的属性。只能 控制当前标签样式。
-
代码
<!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> </head> <body> <p>夏天</p> <p>秋天</p> <p>冬天</p> <p>春天</p> <p style="color: pink;">夏天的回忆</p> </body> </html> -
结果
-
-
外部样式表
-
适合样式比较多的情况
-
核心：样式 单独写到css文件中，之后 吧css引入即可
-
第一步:新建一个后缀名为.css样式文件，把所有的css代码放入。
-
第二步：在html页面使用<link>标签引用这个文件
-
link语法规范：< link rel ="stylesheet" href ="css的文件路径">
-
rel 指定为stylesheet，表示文档是一种样式表文件
-
href用于指定外部样式表的url，可以是相对路径或者绝对路径
-
代码
<!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>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <div>正在加载jjj</div> </body> </html>/* 这个css文件只有样式没有标签 */ div { color: pink; } -
结果
-
-
案例-新闻页面
-
搭建html结构页面
-
修改css样式
-
代码
<!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>Document</title> <style> body { font: 16px/28px 'Microsoft YaHei'; } h1 { /* 文字不加粗 */ font-weight: 400; /* 文字水平居中对齐 */ text-align: center; } .gray { color: #888888; font-size: 12px; text-align: center; } a { text-decoration: none; } .search { color: #666666; width: 170px; } .btn { font-weight: 700; } p { text-indent: 2em; } .pic { /* 想要图片居中对齐，给他的父类标签加入居中对齐 */ text-align: center; } .footer { color: #888888; font-size: 12px; } </style> </head> <body> <h1>北方高温明日达鼎盛,京津冀多地地温将超60℃</h1> <div class="gray"><a href="#">中国天气网</a> 2019/07/03 20:21 <input type="text" value="请输入查询条件 " class="search"><button class="btn">搜索</button></div> <hr> <p>今天93日0华北、黄淮多地出现高温天气,截至下午2点,北京、天津、郑州等地气温突破35℃。预报显示,今后三天3-5日),这一带的高温天气将继续发酵,高温范围以及强度将在4日达到鼎盛,预计北京、天津、石家庄、济南等地明天的最高气温有望突破38℃,其中北京和石家庄的最高气温还有望创今年以来的新高。</p> <h4>气温41.4℃地温66.5北京强势迎七月首个高温日</h4> <p>今天华北、黄淮一带的高温持续发酵截至今天下午2点陕西北部、山西西南部、河北南部、北京、天津、山东西部、河南北部最高气温已普遍超过35℃。大城市中北京、天津、郑州均迎来高温日。</p> <p class="pic"><img src="xinwen.jpg" alt=""></p> <p>在阳光暴晒下地表温度也逐渐走高。今天下午2点华北黄淮大部地区的地表温度都在50℃以上部分地区地表温度甚至超过60℃。其中河北衡水地表温度高达68.3℃天津站和北京站附近的地表温度分别高达66.6℃和66.5℃。</p> <h4>明日热度在升!</h4> <p>不过，专家提醒，济南被雨水天气完美绕开，因此未来一周，当地的高温还会天天上岗。在此提醒当地居民注意防暑降温，防范持续高温带来的各种不利影响。</p> <p class="footer">来源：中国天气网 责任编辑：刘静</p> </body> </html> -
结果
-
-
扫一扫
2528
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
