CSS样式详解-优快云博客

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