css介绍
什么叫做css：
- css是层叠样式表
- 用来修饰HTML样式
- css不能单独存在，必须依赖HTML
- 多个样式定义可以层叠为一个
- 通常存在于样式表中，即css文件
css的作用：修饰HTML的元素标签，让页面变的更加好看
语法：
例如： body{ background-color:black ; }
css的引入：
- css的引入方式一共有三种
- 内联引入
- 内部引入就是，在标签的内部直接写css样式
- 内部引入利用的是标签的 style 属性 ：style = “background-color：black”
- 优点：精确，直接定位对应的标签，省略选择器
- 缺点：Css样式和HTML混为一体！后期修改代码费劲！严重的拖慢页面加载速度；作用范围小，无法形复用，Css代码冗余。
- 内部引入
- 内部引入就是在同一个HTML页面内写CSS样式表；他写在HTML文件的head中，标签 style
- 优点：在当前html文件中形成复用
- 缺点：复用的范围小！不能跨页面复用
Css样式表和HTML文件，没有区分开- 语法：在head标签中：使用style标签：直接在style标签中，使用 选择器{样式：值 ；样式：值;}
- 外部引入:
位置：定义一个外部的样式表文件
引入：
link 标签 引入外部的CSS样式表，link标签在head标签中
link标签的属性：
rel =" stylesheet" rel 属性指示被链接的文档是一个样式表： type : 文件类型 text/css text是css的父类类型 例如：img/png video/mp4
href：引入的地址 css所在的位置路径优点：实现CSS和HTML的“分离”，外部的页面也能引用 ，即可以在同一个项目中都能引用
缺点：现在没有
css的选择器
选择器：让您找到想要修改的HTML元素！ 分为五类
为什么提供了这么多的选择器，让您有更多更优的手段！
基本选择器
基本选择器是最常用的选择器，主要根据元素名或者class/id属性等进行查找！
基本选择器优先级：id>class>元素>
元素选择器：根据元素的名称（即标签的名称）进行选择； 作用范围整体，范围太大，不常用 元素名{}
id选择器：给标签添加id属性
根据id进行选择：#id值{}
类选择器：给标签添加class属性
根据class进行选择： .class值{}
全部选择器： *{ } 代表所有的选择器；越具体的选择器优先级越高；
属性选择器：属性选择器，是根据标签的属性特性进行元素查找！
- [属性名] 找到所有具有这个属性的
- [属性名 = 值] 找到属性 = 值的 注意：这个值加不加单引号都行
- [属性名 * = 值] 找到包含属性，并且属性值包含 值的
- [属性名^=值] 找到包含属性，并且属性值以 值 开头的
- [属性名 $= 值] 找到包含属性，并且属性值以 值 结尾的
伪元素选择器 ： 不能单独存在，只能依赖其他的元素选择器
伪元素选择器，是根据元素的某一种状态，进行css属性操作，例如获取焦点，鼠标悬浮等
：link 选择未访问的连接 例如 a:hover{}
：visited 访问过的链接
：hover 鼠标悬浮
：active 正在点击，即鼠标没有松开的时候
以上四个一起存在的时候 ，必须按照一定的顺序出现：link visited hover active
：focus 获取焦点，即光标所在的位置（不是鼠标的位置）
通常是input标签的状态
：first-letter 第一个字
：first-line 第一行
：first-child 第一个标签，但是这个标签必须有容器标签 即：选择的元素有父容器！
通常是 p 标签的 状态
层次选择器
层次选择器是根据元素的关系进行元素的查找！
选择器1，选择器2，选择器3{ }
多个选择器可以在一起写，中间用“ ，”隔开
选择器一 选择器二 ：选择器二是选择器一的后代标签（即所有的选择器二，包括更里面的子标签），能具体到某一个具体的标签
选择器一 > 选择器二 ：代表只要子标签，而他更里面的不会要
选择器一 + 选择器二 ： 选择一的子标签二 以及之后的选择器一的同级的选择器的一
注意：可以多级选择器一块使用 例如 选择器一 选择器二 选择器三
css的样式：
文字属性:控制字体大小、粗度、样式等！
- font-size 字体大小
- font-family 字体类型 默体、宋体、楷体等
- font-style 字体斜体 : normal正常; italic斜体;
- font-weight 字体的粗度 100~900数值 ;bold;bolder;
文本属性
- text-decoration : 加线 下画线 也能去掉下划线 none ; underline ; overline ; blink ;
- text-align ：文本对齐 left ; right ; center 这个用的挺多，对其的是标签内的所有内容
- text-shadow： 影阴 ： x方向的偏移量 y方向的偏移量 模糊的程度 color
- text-transform: 单词的首字母大写 capitalize; lowercase;
- word-spacing： 单词之间的间隔 normal;固定值;
- line-height:行高，内容自动占一行高度居中的位置； normal;固定值;
- color： 字体颜色 不用前面不加东西的 唯一 一个不加的
背景属性：
background-image: url(“路径”) ;
background-position：可以移动背景； 改变图像在背景中的位置
方法：x y ；注意：向右 和 向下为正 用来使用组合图片，但是容器需要有长宽
background-repeat: 平铺 repeat-y repeat-x repeat no-repeat; repeat （反复的意思）
background-color：颜色
列表属性：
- list-style-type：更换列表类型 如，将有序换成无序 none可以去掉图标
- list-style-image: 更换列表的图片 url(“图片地址”)
- list-style-position：标识出现在列表项内容之外还是内部 inside;outside
尺寸属性：
尺寸大小，有宽和高，但是我们要注意的是，什么类别的标签可以设置宽和高属性！**
我们将标签分为三类：
1.块标签/display:block ：块标签自占一行、可以设置宽和高
2.行内标签/dispaly:inline: 行内标签，可以多个摆放一行，但是注意***行内标签不支持宽和高设置！
3.行内块标签/dispaly:inline-block: 属于行内标签特性，但是它可以设置宽和高属性！这点很重要，如果一行出现多个标签，又支持宽和高设置，不是浮动，必然是行内块实现！
height 高
width 宽
显示属性 ： display ，以下是常用取值
none:不显示 **不显示，并且不占位！ 注意区别于：**visibility: hidden; //隐藏位置保留
block:块级显示
block元素会独占一行，block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独
占一行。block元素可以设置margin和padding属性。
inline:行级显示
inline元素不会独占一行，inline元素设置width,height属性无效。
inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right
都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生
边距效果。
Inline-block:行级块
简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被
排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度
高度特性又具有inline的同行特性。
轮廓：
- outline-style：样式：solid(实线) / dotted(虚线) / dashed (虚线)等
- outline-width：线宽
- outline-color：轮廓的颜色
浮动属性：浮动是垂直排列变成水平排列的重要手段，但是要注意的是，浮动会有负面影响！
需要清除浮动！
float：浮动 left 或者 right none 可以将块级元素放到一行之中
浮动之后，需要再加一个块 然后设置清楚浮动的影响
- 清除浮动：在浮动的标签下方。添加一个空div，找到div添加一个clear:both就可以！
clear
clear：both ； 消除浮动的影响
- 浮动有异常：会脱离原有的层
Overflow： 控制多出元素部分显示！
可以控制内容溢出元素框时在对应的元素区间内添加滚动条。
scroll 滚动
- visible 默认值。内容不会被修剪，会呈现在元素框之外。
- hidden 内容会被修剪，并且其余内容是不可见的。
- scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
定位：定位属性，是为了调整元素标签的位置！想要调整位置，必须要先开position属性，否者方向属性没有作用！
position 必须先设置position 定位才能生效 他默认的是静态static
absolute 绝对定位 相对于边框 放弃占位
relative 相对位置，参照自己原来的位置 保留原来的位置
fixed 固定定位 相对于边框 放弃占位
1、相对的位置
绝对和固定：相对屏幕的边框
相对：相对于原来的位置
2、是否放弃占位：
绝对和固定：放弃原来的占位！
相对：保留原来的值！
3.固定和绝对的区别！
绝对：当屏幕产生滚动，他动！
固定：屏幕滚定，他不动
相对：位置的微调
固定：广告和提示
left
top
right
bottom
这四个样式进行控制位置
- 总结：
- 水平居中 的方法
1、center标签
2、text-align
3、块级元素：margin ：0px auto ;
css盒子模型：
什么是盒子: 就是一种标签抽象化，把每个标签可以当做一个盒子，盒子的大小是标签真正的大小！盒子模型的作用，用于页面布局 排版！
盒子的大小：内容+内边距+外边距+边框
属性：
- margin：外边距 auto自适应
- padding：内边距 会影响内容的显示
- 有两种赋值的方法：
- 1 上下左右
- 2 上下 左右
- 3 上 左右 下
- 4 上 右 下 左
- 或者通过padding-方向 来赋值
- border：边框 三个属性分别是 颜色 形状 大小
Css的属性扩展
圆角： border-radius
阴影： box-shadow : x y 大小 颜色
响应式页面编程
如何辨识屏幕的大小
媒体查询代码写在css样式中！
根绝辨识进行专门的属性设置
语法： screen(屏幕的意思)
@media screen and (条件) and(条件) max-width:屏幕小于指定宽度 min-width：屏幕大于指定宽度 @media screen and (max-width:800px) and (min-width: 701px) { 定义css样式即可 }
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
