css
<style>就是设置html样式的标签
<style></style>一般写在<title>标签下面，在<head>标签里面
选择器的分类
基础选择器：标签选择器、类选择器、id选择器和通配符选择器（都要在style里面）
选择器-（给谁改样式如：h1-h6、p、div）{改成什么样式}
标签选择器：选择想要改变样式的标签，会对body里面所有div修改样式
div{color:red; font-size:16px;}
color 颜色 ; font-size 字体大小单位：px)
类选择器-（样式点定义 .结构类（class）调用）
类名自己定，推荐使用英语，拼音用全拼
.类名{color:red;} <p class="类名“>
多类名调用：.类名1{color：red；} .类名2{font-size:16px;}
<p class="类名1 类名2“>(多类名之间要用逗号隔开）
id选择器和类选择器差不多但是，权重比类选择器高，如果同时有类选择器和id选择器会执行id选择器，id选择器只能调用一次，不能多次调用(唯一的id)
#id名{属性：属性值；}
#hello{color: red;} <p id="hello";>
通配符选择器：它表示选择页面中所有元素（标签）改变样式
*{属性：属性值；}
css字体属性
font-family 字体 Microsoft YaHei（微软雅黑)
font-size 大小 标题要单独标记
font-weight粗细 400=normal（正常粗细） 700=bold（加粗）不能带单位
font-style 样式 normal（正常） italic （斜体）
复合属性
font：font-style font-weight font-size/line-height font-family；（顺序不能乱）
其他可以不写，但是font-size font-weight必须要有
文本
文本颜色
- 预定义颜色值，如（red、skyblue、pink）
- 十六进制（#ffffff）开发中通常用十六进制
- rgb代码：rgb（255，0，0）或rgb（100%，0%，0%）
对齐文本：text-align：center、left、right
装饰文本
text-decoration：none 默认，没有线、overline 上划线、underline 下滑线、line-through 删除线
文本缩进：text-indent：2em：（em是一个字符大小）
文本行间距：line-height（px）
emmet语法
div*10 直接生成10个div
父子级标签 ul>li*3可以直接生成
<ul>
<li></li>
<li></li>
<li></li>
</ul>
兄弟级标签：div+p*3可以直接生成
<div></div>
<p></p>
<p></p>
<p></p>
类名或#id名直接生成div，或者加约束条件也可以如：p.类名。
缩写：tac-表示居中对齐 、tdn-表示不要下划线
css引入方式
内部样式表
一般在中加style改变样式
行内样式表
<div style=”color:red; font-size:12px;”>文本<div>
外部样式
- 新建一个后缀名为》.css的样式文件，把所有css代码放入文件
- 在HTML页面中，使用标签引入这个css文件
<link rel="stylesheet" href="文件名.css" />
复合选择器
后代选择器：后代选择器又称包含选择器
元素1 元素2{样式声明}只会改变元素2.可以叠加
div p span{color: red;}
子元素选择器：只能选择作为最近一级子元素
元素1>元素2{样式声明}只会对下一级改变，不能跨级
并集选择器：可以选择多组标签，为他们同时定义相同的样式 元素1，元素2{声明样式}
div,p{color: red;}
并集选择器是所有选择器都可以是并集选择器的一部分如（div，span，.style）
伪类选择器:伪类选择器有链接伪类、结构伪类
伪类选择器用冒号(:)表示
链接伪类选择器：
- a:link 选择所有未被访问的链接
- a:visited 选择所有已被访问过的链接
- a:hover 选择鼠标指针位于其上的链接
- a:active 选择活动链接，选择鼠标正在按下不松手还没弹起的链接
顺序不能乱，必须是LVHA a链接在浏览器中有默认样式，需要单独指定样式
focus伪类选择器用于选取获得焦点的表单元素，一般用于标签 input：focus可以修改input样式
css中元素中元素显示模式
html中元素一般分为块元素和行内元素两种类型
块元素特点：
1.独占一行
2.高度，宽度，外边距以及内边距都可以控制
3.默认宽度是容器(父级盒子宽度)的100%
4.它是一个容器或盒子，里面可以放行内元素和块级元素
文字类块级元素中不能再放块级元素，如：p、h1-h6里不能再放行内元素
行内元素的特点： 1.相邻行内元素在一行上，一行可以显示多个
2.宽、高直接设置是无效的
3。默认宽度就是它本身内容的宽度
4.行内元素只能容纳文本和其他行内元素 a元素内不能再放a链接
行内块元素——<img /> <input /> <td>
元素显示模式转换
dispaly:block;转换为块元素
dispaly:inline:转换为行内元素
dispaly：inline-block;转换Wie行内 元素为行内块元素
截图工具：snipaste
css的背景
背景颜色：background:transparent(透明)\color
背景图片：background-image:none(无)\url(图像地址)
背景平铺：background-repeat:repeat(平铺）\no-repeat(不平铺)\repeat-x(横向)\repeat-y(纵向)
背景图片位置：background-position:x y；
方位名词无顺序要求，top（上）\ right（右）\ bottom（下）\ left（左）\ center（中间）
参数值：第一个是x坐标，第二个是y坐标，单位是像素值
背景图片固定：background-attachment: scroll(滚动)\fixed(固定)
背景半透明：background： rgba(0,0,0,0.3),括号里面必须有四个值，最后一个值0.3是透明度，越小透明度越高
css的三大特性 1层叠性：就近原则
div{color:red;}
div{color:pink;}
在权重一样的情况下，会执行下层代码pink色
2继承性：子标签会继承父标签的某些样式如（以text-、font、line-开头的样式，还有color都是会继承父元素的，总之就是与文本有关的）
继承行高时如果有1.5行高就是当前文字大小的1.5倍，如font：12px\1.5这个行高就是12px*1.5
3优先性：继承和*的权重为0，元素选择器权重为1.类选择器为10.id选择器为100.行内style为1000，
！important权重无穷大
a链接需要单独指定样式
css盒子模型
border 边框 、content 内容、 padding 内边距、 margin 外边距、
border-width 边框粗细，单位px(400px是正常粗细，700px是加粗)、
border-color 边框颜色、border-style 边框的样式(none无边框、solid实线边框、dashed虚线、dotted点线)
border-collapse：collapse；合并单元格之间
padding：是content与border之间的距离
一个值：上下左右都是一样的内边距
padding:5px,10px;2个值，上下5像素，左右10像素
padding：5px，10px，20px；3个值上5像素，左右10像素，下20像素
padding:5px,10px,20px,30px;4个值上右下左（顺时针）
嵌套块元素垂直外边距的塌陷
- 可以为父元素定义上边框
- 可以为父元素定义上内边框
- 可以为父元素添加overflow：hidden
清除内外边距*{margin:o:padding:;}
圆角边框:border-radius:length(数值)；radius半径，圆角设置为高度的一半或50%就可以成半圆的角。 盒子影子：box-shadow
值：h-shadow 水平阴影的位置，允许负值(左右)
v-shadow 垂直阴影的位置，允许负值(上下)
blur 模糊距离
spreod 阴影的尺寸
color 阴影的颜色
inset 将外部阴影(outset)改为内部阴影
盒子阴影不占空间
