一 基本语法规范
1.1 内部式
写在 style 标签中, 嵌入到 html 内部
<body> <p>hello</p> <style> p{ color: green; font-size: 30px; } </style> </body>
1.2 内联式
<body> <p style="color:greenyellow; font-size: 50px;">hello</p> </body>
1.3 外部式
• 创建一个 css 文件
• 使用link 标签引入css
<link rel="stylesheet" href="[css 文件路径]">
创建 demo4.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> <link rel="stylesheet" href="style.css" </head> <body> <p>hello</p> </body> </html>
创建 style.css
p { font-size: 100px; color: gray; }
注意: 在html 文件中必须引用link 标签调用CSS,否则不生效
二 选择器
2.1 标签选择器
<p>狗剩</p> <p>狗剩</p> <p>狗剩</p> <div>如花</div> <div>如花</div> <div>如花</div> <style> p{ color: red; font-size: 10px; } div{ color: pink; font-size: 10px; } </style>
能快速为同一类型的标签都选择出来, 但是不能差异化选择
2.2 类选择器
<p class="one forth">狗剩</p> <p class="two">狗剩</p> <p class="three">狗剩</p> <style> .one{ color: blue; } .two{ color: red; font-size: 20px; } .three{ color: green; font-size: 20px; } .forth{ font-size: 40px; } </style>
语法细节:
• 类名用 . 开头
• 下方的标签使用class 属性类调用
• 一个类可以被多个标签使用,一个标签也能使用多个类(多个类名要使用空格分割,这种做法 可以让代码更好的复用)
• 如果是长的类名, 可以用 - 分割
• 不要使用纯数字, 或者中文, 以及标签名来命名类名
2.3 id 选择器
<p id="hello">hello kaikai</p> <style> #hello{ color: pink; font-size: 30px; } </style>
• CSS 中使用# 开头表示 id 选择器
• id 选择器的值和 html 中某个元素的 id 的值相同
• html 的元素id 不必带 #
• id是唯一的,不能被多个标签使用
2.4 后代选择器
<div class="one"> <h3>hello</h3> <h2>kaikai</h2> </div> <dev id="two"> <h3>akai</h3> </dev> <style> .one h3{ color: red; font-size: 50px; } #two h3{ color: greenyellow; font-size: 50px; } </style>
先找到所有 .one的元素,再在.one 的后代里(子标签/孙子标签/重孙子标签...)查找 h3 标签
三 字体属性
设置字体
<div class="one">hello world</div> <style> .one{ /* 字体家族 */ font-family: '微软雅黑'; /* 字体大小 */ font-size: 100px; /* 字体粗细 */ font-weight: 900; /* 字体样式 */ font-style: italic; } </style>
四 文本属性
文本颜色
<div class="one">hello world</div> <style> .one{ font-size: 100px; /*颜色可以使用 rgb 来定义颜色*/ /*color : rgb(100,200,50)*/ color: red; /* 文本对齐方式,左对齐(left),右对齐(right),居中对齐(center) */ text-align: center; /* 文本装饰:underline(下划线)/none 什么都没有,可以个a 标签去掉下划线/line-through 删除前 */ text-decoration: underline; /* 文本缩进 */ text-indent: 40 px; /* 行高 */ text-height: 1000px; } </style>
另: 可以使用6 个十六进制的数字来进行表示颜色 #ff0000(红色) #00ff00(绿色) #0000ff(蓝色)
如果每个分量的十六进制的数字都是一样的,此时就可以简写成
#AABBCC=> #ABC
#AABCDD=>不能缩写
五 背景属性
<div class="one">hello world</div> <style> .one{ font-size: 100px; width: 1000px; height: 800px; /* 设置背景颜色 */ background-color: rgb(25, 100, 100); /* 设置背景图片 */ background-image: url(image/panda.jpg); /* 是否平铺 重要取值:repeat(平铺) repeat-x(水平平铺) repeat-y(垂直平铺)*/ background-repeat: no-repeat; /* 设置背景位置 */ background-position: center; /* 设置背景大小 */ background-size: 1000px ; } </style>
六 圆角矩形
基本用法:
border-radius: length ;
length 是内切圆的半径,数值越大,弧线越强烈
<div class="one">hello world</div> <style> .one{ background-color: gray; width: 700px; height: 500px; border-radius:25px ; } </style>
如果此时的背景是正方形,当length 为边长的一半时,此时就是一个圆形.
七 元素的显示模式
7.1 块级元素
常见元素
h1 - h6
p
div
ul
ol
li
. . .
特点:
• 独占一行
• 高度,宽度,内外边距,行高都可以控制
• 宽度默认是父级元素宽度的 100% (和父级元素一样宽)
• 相当于一个容器(盒子) ,里面可以放行内和块级元素
<div class="parent"> <div class="child"> child1 </div> <div class="child"> child2 </div> </div> <style> .parent{ width: 300px; height: 200px; background-color: paleturquoise; } .child{ /* 不写 width, 默认和父元素一样宽 */ /* 不写 height, 默认为 0 (就看不到了) */ height: 200px; background-color: red; } </style>
7.2 行内元素/内联元素
常见元素:
a
strong
b
em
i
del
s
ind
u
span
. . .
特点:
• 不独占一行,一行可以显示多个
• 设置高度,跨度,行高无效
• 左右外边距有效,上下无效, 内边距有效
• 默认宽度就是本身的内容
• 行内元素只能容纳文本和其他行内元素,不能放块级元素
行内元素和块级元素的区别
• 块级元素独占一行,行内元素不独占一行
• 块级元素可以设置宽高,行内元素不能设置宽高
• 块级元素四个方向都能设置内外边距, 行内元素垂直方向不能设置.
7.3 改变显示模式
• display: block 将行内元素改成块级元素
• display: inline 将块级元素改成行内元素
• display: none 将选定内容隐藏,(不会再页面上显示)
八 盒模型
8.1 边框
基础属性:
• 粗细: border-width
• 样式: border-style , 默认没边框, solid: 实线边框 |dash: 虚线边框 |dotted: 点线边框
• 颜色: border-color
<div>hello akai</div> <style> div{ /* 此时不会撑大元素了 */ box-sizing: border-box; width: 500px; height: 250px; background-color: gray; /* border: 10px green solid; */ /* 边框还可以分开设置 */ border-bottom: red 10px solid; border-left: greenyellow 10px dotted; border-top : blueviolet 10px dashed; border-right: orange 10px solid; } </style>
注: 边框会撑大盒子,width, height 是500*250 ,而最终整个盒子大小时520*270. 边框10 个像素相当于扩大了大小.但是一般不希望 会变大,就可以通过设置 box-sizing : border-box
8.2 内/外边距
<div>hello akai</div> <style> div{ /* 此时不会撑大元素了 */ box-sizing: border-box; width: 500px; height: 250px; background-color: gray; /* border: 10px green solid; */ /* 边框还可以分开设置 */ border-bottom: red 10px solid; border-left: greenyellow 10px dotted; border-top : blueviolet 10px dashed; border-right: orange 10px solid; /* 设置上下左右为 30px */ padding: 30px; } </style>
复合写法:
padding: 5px ; 表示四个方向都是 5px
padding: 5px 10px 表示上下内边距 5px ,左右内边距为 10px
padding: 5px 10px 20px 表示上边距 5px,左右内边距为10px, 下内边距为 20px
padding: 5px 10px 20px 30px 表示上5px,右10px, 下20px,左 30 px (顺时针)
外边距为 margin,使用方法和内边距一样
注:margin 的左右边距设置为 auto 时,是设置元素水平居中
<div class="one"> <div class="two"> 元素居中 </div> </div> <style> .two{ font-size: 50px; color: yellowgreen; text-align: center; text-decoration: underline; text-indent: 20px; line-height: 100px; } .two{ width: 300px; height: 200px; background-color: gray; margin-left: auto; margin-right: auto; } *{ box-sizing: border-box; } </style>
九 弹性布局
<div class="one"> <div class="two">111</div> <div class="two">222</div> <div class="two">333</div> <div class="two">444</div> </div> <style> .one{ /* 开启弹性布局 */ display: flex; width: 300px; height: 200px; background-color: gray; /* 设置水平样式 */ justify-content: space-around; /* 设置垂直样式(只对单行元素有效,多行元素要用item-contents) */ align-items: center; } .two{ height: 60px; width: 50px; font-size: 30px; background-color: red; } </style>
当父元素设置为 display: flex 之后,只有子类标签元素会平铺,但孙子标签没有影响.
