您的位置：首页 > Web前端 > CSS

前端入门基础知识大全（一）-CSS基础（1）

2018-11-11 13:31 429 查看

个人学习笔记，仅供想入前端大门小伙伴学习

一、什么是CSS

Cascading Style Sheets : 样式表
CSS用于HTML元素的样式的定义
能够实现内容(HTML页面元素) 与 表现(CSS展示效果)相分离
能够提升代码的可重用性 和 可维护性

二、CSS 与 HTML 之间的关系

HTML 负责搭建网页结构
CSS 负责页面的样式的设置
HTML元素属性 与 CSS样式 冲突时 使用原则 :
尽量使用 CSS 样式 来取代 HTML 属性

三、使用CSS样式表的三种方式

1、内联方式

又称为 行内样式 或 行内方式

2、内部样式表

将样式内容定义在网页的 <head> 中

3、外部样式表

将样式内容定义在外部的 CSS 文件中(***.css)
在HTML页面中引入 ***.css 去使用样式内容

四、CSS样式表特征

1、继承性

大部分的样式属性是可以被继承的
即在父元素中定义好的样式 可以直接被子元素使用

2、层叠性

允许为一个元素定义多个样式规则，如果样式规则中的样式属性不冲突的时候，他们则都可以被应用到元素上

3、优先级

在层叠性基础上，如果样式属性声明冲突时，会按照不同使用方式的优先级来应用样式
低 ：浏览器默认设置
中 ：内部样式表 和 外部样式表
就近原则 - 后定义者优先
高 ：内联样式
最高：!important
显示调整 样式的优先级
属性名称:值 !important;

五、CSS基础选择器

1、选择器的作用

规范了页面中哪些元素能够使用声明好的样式
选择器是为了匹配页面上的元素的

2、选择器详解

1、通用选择器

作用：为了匹配页面中所有的元素
语法：* { … }

ex:想设置页面中所有的文字的大小为12px

方案1：

*{
font-size:12px;
}

方案2：

body{
font-size:12px;
}

在网页中，推荐使用方案2的继承性来取代通用选择器

2、元素选择器

作用：使用元素名称来充当选择器，目的是为了匹配页面中指定元素名称的所有标记
语法：元素名称 { … }

div{ ... }
p{ ... }
ul{ ... }

3、类选择器(重点)

作用：定义好之后，允许被任意元素的 class 属性进行引用的选择器

1、基本类选择器

语法：.类名{ … }
引用类选择器：

<ANY class="类名">

类名规范：
1、字母，数字，_,-组成
2、不能以数字开头

<style>
.important{
font-size:24px;
color:red;
}
</style>

<div class="important">
引用了 important 的元素
</div>

2、多类选择器的引用方式：

允许让一个元素同时引用多个类选择器
多个类选择器之间，使用空格隔开即可

<ANY class="类1 类2 类3">

3、分类选择器的定义方式：

分类选择器，允许将类选择器和元素选择器结合起来使用，从而实现对某种元素中不同样式的细分控制

元素选择器.类选择器{ ... }
div.important{ color:green; }
以上选择器匹配的是页面中 class属性值为 important 的 div 元素
<div class="important"></div>

4、ID选择器

作用：为了匹配页面中指定ID值的元素
语法：#IDValue{ … }

<div id="main"></div>
<style>
#main{ ... }
</style>

5、群组选择器

作用：选择器的声明，是一个以 , 隔开的选择器列表，为了定义多个选择器中的公共样式
语法：
选择器1,选择器2,选择器3{
… …
}
*

#main,div.redColor,.important,.red{
color:red;
}

等同于

#main{color:red;}
div.redColor{color:red;}
.important{color:red;}
.red{color:red;}

6、后代选择器

后代：只要具备层级关系的元素，被嵌套的都可以被称之为后代
语法：选择器1 选择器2{ … }

1、div span{ }
匹配 所有div 中的 span 元素
2、#main span{ ... }
匹配 id为main的元素中的 所有 span元素
3、#main div.left-side{ ... }
匹配 id为mian 的元素中 class为left-side 的div元素
<div id="main">
<div class="left-side"></div>
</div>

7、子代选择器

子代：在层级元素中，只具备一层层级关系，被嵌套的元素称之为子代元素
语法：选择器1>选择器2{}

<div>
<p>
<span></span>
</p>
</div>

p 是div的子代元素
span 是p的子代元素
span 是div的后代元素

<div>
<span>div中的span</span>
<p>
<span>div 中的 p 中的 span</span>
</p>
</div>

8、伪类选择器

作用：为了匹配页面元素不同的"状态"
语法：
:伪类{ … }
选择器:伪类{}

伪类选择器的分类：

1、链接伪类
1、:link , 匹配未被访问的超链接的状态
2、:visited,匹配访问过的超链接的状态
2、动态伪类
1、:hover,匹配鼠标悬停在元素上的状态
2、:active,匹配元素被激活时的状态
3、:focus,匹配元素获取焦点时的状态
3、目标伪类
4、结构伪类
5、否定伪类

六、尺寸与边框

1、CSS单位

1.1、尺寸单位

1、px (pixel)
2、% ：相对单位
3、pt ：磅(point)
多数用于描述 文字大小 1pt = 1/72 in
4、in ：英寸(inch)
1in=2.54cm
5、cm ：厘米
6、mm ：毫米
7、em ：字体大小，使用父元素字体大小的倍数
#main{  font-size:2em; }
8、rem ：字体大小,使用html根元素字体大小的倍数
#main{ font-size:2rem; }

1.2、颜色单位

1、rgb(r,g,b)
r:red (0~255)
g:green (0~255)
b:blue (0~255)

ex:
color:rgb(112,76,98);
2、rgb(r%,g%,b%)
3、rgba(r,g,b,alpha);
alpha:透明度 0~1 之间的数字
0 : 完全透明
1 : 完全不透明
4、#rrggbb
由6位十六进制的数字来组成的颜色
十六进制：0~9 A~F 组成
#123456;
#654321;
#aabbcc;
#e4393c;
5、#rgb
#rgb 是 #rrggbb的缩写
#rrggbb每两位数字都相同的情况下，可以使用#rgb的方式取代
#112233 -> #123;
#ff0000 -> #f00
6、表示颜色的英文单词
red,green,blue,yellow,pink,purple,

2、尺寸属性

2.1、页面元素的默认尺寸

块级：
宽度：占父元素宽度的 100%
高度：以内容为准
行内：
宽度：以内容为准
高度：以内容为准

2.2、尺寸属性

1、宽度
width

3ff7
min-width
max-width
2、高度
height
min-height
max-height

2.3、在HTML中，允许设置尺寸属性的元素

1、所有的块级元素 全部都可以设置
2、行内块中的大部分元素可以设置
除 radio 和 checkbox 以外的行内块元素
3、HTML元素本身就具备 width 和 height属性的可以设置尺寸，其余则不可以
<img> 可以设置尺寸
<table> 可以设置尺寸
特殊：除<img>以外的其它行内元素时不允许设置尺寸的

2.4、溢出

2.4.1、什么是溢出

使用尺寸属性设置元素大小时，如果内容所需要的空间大于元素空间大小时，则会产生溢出的效果

2.4.2、溢出处理属性

属性：
overflow
overflow-x
overflow-y
取值：
1、visible
默认值，溢出可见
2、hidden
隐藏
3、scroll
显示滚动条，但是溢出时可用
4、auto

3、边框属性

3.1、简写方式属性

通过一个属性将元素的四个方向的边框的所有的操作一起设置
语法：

border:width style color;
width:边框宽度，以px为单位
style:边框样式
solid:实线
dotted:虚线(.......)
dashed:虚线(-------)
color:边框颜色
可以取值为 transparent(透明)
border 可以
取值为 none 或 0;

3.2、单边定义

只单独设置某一条边的宽度，样式，颜色

属性：border-方向:width style color;
方向：top / right / bottom / left
ex:
1、border-left:2px dotted red;
2、border-bottom:1px dashed blue;
特殊：border-方向:none / 0;

3.3、单属性设置

设置四个方向边框的某一具体属性值
属性：border-属性:值;
属性：width / style / color

3.4、单边单属性设置

设置某个方向的边框的某一具体属性
属性：border-方向-属性:值;
ex:
1、border-top-color:blue;
2、border-left-style:dotted;

4、边框倒角属性

属性：
border-radius
取值：
以px为单位的数值 或 %
单角属性：
border-top-left-radius:
border-top-right-radius:
border-bottom-left-radius:
border-bottom-right-radius:
ex:
1、border-radius:5px;
2、border-radius:50%;
将矩形元素变为圆形(正圆，椭圆)
3、border-radius:5px 10px 15px 20px;
左上角倒角半径：5px
右上角倒角半径：10px
右下角倒角半径：15px
左下角倒角半径：20px

5、边框阴影属性

属性：box-shadow
取值：
h-shadow v-shadow blur spread color inset

h-shadow:阴影的水平偏移距离，取值为正，阴影向右偏移，取值为负，阴影向左偏移
v-shadow:阴影的垂直偏移距离，取值为正，阴影向下偏移，取值为负，阴影向上偏移
blur:可选，阴影的模糊大小
spread:可选，阴影的大小
color:可选，颜色
inset:可选，将默认的外阴影改为内阴影

6、轮廓属性

轮廓：绘制与元素边框外围的一条线
属性：outline
取值：width style color;

outline-widht:
outline-style:
outline-color:

轮廓的常用方式：
outline:none / 0;

七、框模型

1、什么是框模型

框：页面元素皆为框
框模型：Box Model 定义了元素处理(计算)尺寸，边框，内边距 和 外边距的 一种方式
有框模型的属性介入到元素中的时候，元素实际占地面积就会发生改变
元素实际占地宽度=左右外边距+左右边框+左右内边距 + width;
元素实际占地高度=上下外边距+上下边框+上下内边距 + height;

2、外边距

2.1、什么是外边距

围绕在元素边框周围的空白区域就是外边距
外边距也是体现两个元素之间距离的一种表现方式

2.2、语法

2.2.1、属性

margin:设置四个方向的外边距值;
margin-top/right/bottom/left:设置单一方向外边距值;

2.2.2、取值

1 、取值为 px 的具体值
2、%
3、auto
自动，自动计算左右外边距的值，前提要求元素必须有宽度
4、负数
目的是为了移动元素
margin-top 设置数据为正数时，元素向下移动
margin-left 设置数据为正数时，元素向右移动
margin-top 设置数据为负数时，元素向上移动
margin-left 设置数据为负数时，元素向左移动
5、margin 的简写方式
1、margin:value;
四个方向外边距是相同的
2、margin:v1 v2;
v1:上下外边距
v2:左右外边距
ex:
margin:0 auto;
3、margin:v1 v2 v3;
v1:上外边距
v2:左右外边距
v3:下外边距
4、margin:v1 v2 v3 v4;
上 右 下 左

2.2.3、页面中具备默认外边距的元素

在页面中
body,p,h1,h2,h3,h4,h5,h6,ol,ul,dl,dd,pre
以上元素会具备默认的外边距
在网页开发中，通常会通过 CSS Reset(重写)的方式，将默认的外边距全部都设置为0

2.2.4、外边距的特殊效果

1、外边距的合并
当两个垂直外边距相遇时，他们将合并成一个，取两者间较大的值，作为他们的外边距
2、外边距的溢出
在某些特殊的条件下，为子元素设置外边距时，会作用到父元素上
特殊条件：
1、父元素不能有上边框
2、为第一个子元素设置上外边距时
解决方案：
1、为父元素增加上边框即可
弊端：父元素的高度会发生改变
2、为父元素设置上内边距来取代子元素的上外边距
弊端：父元素的高度会发生改变
3、在子元素之上再增加一个空<table></table>
弊端：在页面上会多一个空子元素
4、... ...
3、为行内元素 和 行内块元素设置垂直外边距时
1、行内元素
对垂直外边距，无效，img 除外
2、行内块元素
整行元素都跟着发生改变

3、内边距

3.1、什么是内边距

内容区域 与 边框(边缘)之间的空间
注意：内边距会扩大元素边框的占用区域

3.2、语法

1、属性
padding:值;
padding-top/right/bottom/left:值;
2、取值
1、为 px 具体值
2、为 % 的相对数据

3、简便写法
1、padding:value;
四个方向外边距相同
2、padding:v1 v2
上下  左右
3、padding:v1 v2 v3;
上  左右  下
4、padding:v1 v2 v3 v4;
上 右 下 左

3.3、特殊效果

1、为行内元素 和 行内块 元素设置垂直内边距时
只会影响自己，并不会影响其它元素

3.4、box-sizing

页面中元素边框内的尺寸计算方式
元素边框内宽度=左右边框+左右内边距+width

div{
width:400px;
border:2px solid red;
border-left-widt:17px;
padding-left:32px;
padding-right:16px;
}

属性：box-sizing
作用：重新指定元素框模型的计算模式
取值：
1、content-box
默认值，采用默认的计算模式
元素边框内宽度=左右边框+左右内边距+width
元素边框内高度=上下边框+上下内边距+height
2、border-box
新计算模式，会将元素的border以及padding算在 width 和 height 之中

4、背景属性

4.1、背景颜色

属性：background-color
取值：
合法颜色值 或 transparent
注意：
1、背景色会填充到元素的内容，内边距，以及边框上的
2、如果边框为透明色，则边框位置处显示的颜色与背景色一致

4.2、背景图像

属性：background-image
取值：url(图像URL)
注意：
1、背景图是从元素的左上方出现的
2、如果背景的尺寸大于元素的尺寸的话，那么落在元素内的图片是可见的，元素外的图是不可见的
3、如果元素的尺寸大于背景图的尺寸，默认是以平铺(重复)的方式出现的

4.3、背景图像重复

属性：background-repeat
取值：
1、repeat
在垂直和水平方向都平铺,默认值
2、repeat-x
仅在水平方向平铺
3、repeat-y
仅在垂直方向平铺
4、no-repeat
不平铺

4.4、背景图片尺寸

属性：background-size
取值：
1、width height
2、width% height%
3、cover
覆盖，将背景图等比放大，直到背景图能覆盖到当前元素的所有区域为止
4、contain
包含，将背景图等比放大，直到背景图的右边或下边碰到元素边缘为止

4.5、背景图片固定

属性： background-attachment
取值：
1、scroll
默认值，背景图会随着滚动条而滚动
2、fixed
固定,背景图不会随着滚动条的滚动而改变位置

4.6、背景图片定位/位置

作用：改变背景图像在元素中的默认位置
属性：background-position
取值：
1、x y
x ：背景图像水平偏移距离，取值为正，背景图向右偏移，取值为负，背景图向左偏移
y ：背景图像垂直偏移距离，取值为正，背景图向下偏移，取值为负，背景图向上偏移
2、x% y%
背景图在元素的大体的哪个位置处
3、关键字
x : left / center / right
y : top / center / bottom

CSS Sprites
雪碧图，精灵图
将若干幅小图片拼合一幅大图片中的实现方式

4.7、背景属性

属性：background
取值：color url() repeat attachment position

ex:
1、background:red;
2、background:url(a.jpg) -10px 125px;

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航