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样式即可 }