css基础汇总 -凯发k8官方网
目录:
1.css的引入方式
2.css选择器
3.字体样式
4.文本样式
5.边框样式
6.列表样式
7.表格样式
8.图片样式
9. 背景样式
10.超链接样式
11.盒子模型
12.浮动布局
13.定位布局
14.后续补充
1.1外部样式表
意思是把html和css放在放在不同的文件里，然后用link标签来引入css文件
格式及说明：
<link rel="stylesheet" type="text/css" href="文件路径" />- link标签放在html的head标签里
- rel属性和取值都是固定的，表示引用一个样式表文件(即css文件)
- type属性和取值也都是固定的，表示这是一个标准的css文件
- herf是指css文件路径
1.1内部样式表
就是把html代码和css代码放在同一个html文件
格式及说明：
<style type="text/css">…… </style>- css代码放在style标签中，然后style标签放在head标签内
- 属性type和属性值text/css是固定不变的，表明是标准的css
1.3行内样式表
同样的把html和css的文件放在同一个文件里，但是此时的style不是在head标签的内部
直接一个例子：
2.1元素的id和class
id和class都是标签最基本的两个属性，id属性的属性值具有唯一性，在一个页面，相同的id只能出现一次，class属性是为同一个页面的不同元素设置相同的class，然后使相同的class具有相同的css样式注意每一个标签的id名字都不能重复，不管是不是同一种标签，所以id选择器一次只能选择一个标签。id和class的命名必须是以字母开头，包含数字字母下划线或者横线
2.2元素选择器
意思就是相同的标签具有相同的属性
2.3id选择器
为元素设置id属性，然后针对设置的id元素定义css样式
举个例子：
注意id选择器id名的前面必须加上前缀#否则无法生效
2.4class选择器
我们可以对相同或者不同的元素定义相同的class属性，然后针对相同的class元素，使用同一css代码进行操作
举个例子：
注意class名前必须加上.前缀不然无法生效
2.5后代选择器
后代选择器就是选择元素内部中某一元素的所有元素，包括子元素或者其他的后代元素
例子：
2.6通配符选择器
通配符可以选择body标签里边所有的标签
*{}一般通配符选择器都用于清除默认样式：
很多标签都有一些默认的盒子样式比如body，div等都有默认的内外边框需要清除可以用下面代码进行清除默认样式
2.7群组选择器
指同时对几个选择器进行操作
举例：
2.8交集选择器
就是一个class属性里边有多个class的值，比如
我们可以看到
这行代码p标签内class值既有box1又有box2的标签，那么就对应
2.9兄弟选择器
直接看代码
cc会被标注成红色
.aaa p代表的意思是选中和.aaa紧挨着的p元素，如果不是紧挨着就不会被选中
如果是.aaa~p就是选中.aaa后边的所有的p标签
3.1字体样式属性
3.2字体类型
font-family：我们往往会使用不同的字体，比如宋体，微软雅黑。
格式及说明：
font-family: 字体1, 字体2, ... , 字体n;- font-family可以指多种字体，指多种字体的时候按从左到右的顺序进行排序
- 如果不定义此属性那么默认是宋体
- 如果字体类型是由多个单词组成那么需要加上双引号
- 定义多种字体的意思，每个人的电脑的字体有可能不一样，有可能有些字体安装，有可能有些字体没安装，比如 p{font-family:arial,verdana,georgia;}意思是p标签内优先使用arial字体，如果电脑没有那么再考虑verdana,依次类推
3.3字体大小
font-size：属性值分为两种，一种是关键字small,medium,large 依次加大，另一种直接是像素值
3.4字体粗细
font-weight：属性值分为两种，一种是100~900的数值依次加粗，还有一种关键字lighter，bold,bolder依次加粗
介绍完这三种属性后，我们会发现，如果一个一个属性的写，那么显得麻烦，这里就可以用到font的复合属性
font-size: 20px; line-height: 400%;//行高，后边会讲 font-family:“宋体”;上边这三行等价于
font:20px/400% “宋体”;这里注意行高属性在书写时必须在文字自号后边。
3.5字体风格
font-style：属性值为italic时为斜体，属性值为oblique时也为斜体
既然都是斜体，那么有什么区别呢，可以这么理解：
有些字体有italic属性，但是有些字体却没有italic属性。oblique是让没有italic属性的字体也有斜体的效果
3.6字体颜色
color：介绍两种属性值，一种是关键字red，green等，一种是十六进制的rgb值。
rgb其实就是是通过三种颜色(红绿蓝)不同的浓度来表示不同的颜色，浓度在0~255之间
例如：
color:rgb(255,0,0)表示红色表示成十六进制就是：
color:#ff0000就表示红色 color:#000000就表示黑色 color:#ffffff就表示白色4.1文本样式属性
属性说明| text-indent | 首行缩进 |
| text-align | 水平对齐 |
| text-decoration | 文本修饰 |
| text-transform | 大小写转换 |
| line-height | 行高 |
| letter-spacing,word-spacing | 字母间距词间距 |
4.2首行缩进
text-indent：属性值为像素值
例子：
4.3水平对齐
text-align：有三个属性值分别为left(左对齐)，center(居中对齐)，right(右对齐)
4.4文本修饰
text-decoration：常用的属性值为underline(下划线)，line-through(中划线)，overline(顶划线)
举例;
一般的，我们的超链接都会有下划线
那么只要我们把text-decoration属性值变成none就行了
4.5大小写
text-transform：有三个属性值uppercase(转换成大写)，lowercase(转换成小写)，capitalize(只将每个英文单词的首字母变成大写)
4.6行高
line-height：属性值就是像素值或百分比(百分比是和字号比较200%就是字号的两倍)
这里有一个妙用让行高等于盒子高让文字在盒子内居中对齐
4.7间距
1.letter-spacing：字间距(如果有英文的话，把每一个英文的单词看出一个字)，属性值为自定义像素值
2.word-spacing：单词间距(只针对英文)，属性值为自定义像素值
5.1边框样式属性
5.2整体样式
1.border-width：定义边框的宽度取值是一个像素值
2.border-style：通常属性值有两个dashed(虚线)，solid(实线)
举个例子，我们为div添加边框
比如我们给一个图片添加边框
其实div里边的css代码可以等价于border:1px solid red,这是css里边的简写形式
5.3局部样式
每个边框都可以自己设置自己的width,style和color,举个例子：
6.1列表项符号
6.2list-style-type有序列表的属性取值
属性值说明| decimal | 阿拉伯数字(也是默认值) |
| lower-roman | 小写罗马数字 |
| upper-roman | 大写罗马数字 |
| lower-alpha | 小写英文字母 |
| upper-alpha | 大写英文字母 |
例子：
6.3list-style-type无序列表的属性取值
属性值说明| disc | 实心圆(默认值) |
| circle | 空心圆 |
| square | 实心正方形 |
例子：
6.4去除列表项符号
list-style-type
例子：
6.5列表项图片
list-style-image：ulr(图片路径)：我们可以自定义列表项符号
7.1表格标题的样式
caption-side：两个属性值，第一个top(默认值)表示标题子顶部，第二个属性值botton,表示标题在底部
例子：
7.2表格边框合并
border-collapse：由于表格之间是有空隙的，所以可以使用这个属性进行边框合并，属性值常用的有两个，separate(边框分开，有空隙也是默认值)，collapse(边框合并，无空隙)
例子：
当我们不合并的时候:
合并后
7.3表格边框间距
border-spacing：属性值为像素值
例子：
8.1图片大小
1.width：设置图片宽度，属性值为自定义像素值
2.heigth：设置图片高度，属性值为自定义像素值
8.2图片边框
8.3图片对齐
text-align：水平对齐，常用属性值有三个，left(左对齐，默认)，center(居中对齐)，right(右对齐)
8.4文字环绕
float：常用属性值有两个，一个是left(向左浮动)，right(向右浮动)
例子：
9.1背景样式属性
属性说明| background-image | 定义背景图片的地址 |
| background-repeat | 定义图片地址重复，横向或者纵向重复 |
| background-position | 定义背景图片位置 |
| background-attachment | 定义背景图片固定 |
9.2背景颜色
background-color：一般我们两种属性值，第一种是英文值，一种是十六进制的rgb值
9.3背景图片样式
background-image：属性值为
例子：
注意：我们要想使用图片当背景，必须设置标签的宽高，否则图片无法正常显示
9.4背景图片重复
background-repeat：repeat在水平方向和垂直方向同时平铺(默认值)，repeat-x只在水平方向平铺，repeat-y：只在垂直方向平铺，no-repeat不平铺
9.5背景图片的位置
background-position：属性值有两种一种是像素值，一种是关键字
1.像素值
我们需要同时设置水平和垂直方向的属性值，例子：
40px是水平方向图片与网页最左端的距离，20px是与最顶端与图片的距离
2.关键字
属性值说明| top left | 左上 |
| top center | 靠上居中 |
| top right | 右上 |
| left center | 靠左居中 |
| center center | 正中 |
| right center | 靠右居中 |
| bottom left | 左下 |
| bottom center | 靠下居中 |
| bottom right | 右下 |
9.6背景图片的固定
background-attachment：scroll(随标签一起滚动)，fixed(固定不动)
10.1超链接伪类
一般情况下我们的超链接在鼠标点击后前后有不同的样式：
- 默认情况下，字体为蓝色，带有下划线
- 鼠标点击时，字体为红色，带有下划线
- 鼠标点击后，字体为紫色，带有下划线
我们可以使用超链接伪类来定义超链接点击之后的不同时期的样式，超链接伪类如下：
伪类说明| a:link | 定义元素未访问的样式 |
| a:visited | 定义a元素访问后的样式 |
| a:hover | 定义鼠标经过a的样式 |
| a:active | 定义鼠标点击激活之后的样式 |
这里的text-decoration:none是去掉下划线的操作
10.2深入hover
很多朋友可能都以为hover只限用于a标签,其实不是，他其实适用于任何标签
例如，用于div标签，当我们把鼠标放在div区域上
再比如我们鼠标到为img标签时为图片添加一个边框：
下面是我们鼠标没有放在上边的效果
我们鼠标放在上边的效果：
10.3鼠标样式
cursor：这个属性代表浏览器鼠标样式，一般常用的属性值有三种，一种是默认的default，一种是pointer(手装),一种是text(大写的i装)
当然我们也可以自定义鼠标的样式语法：
cursor:，属性值：属性值和上边的一样
11.1盒模型简介
盒模型也叫框模型包含五个部分：宽度(针对内容区)，高度(针对内容区)，内边距，边框，外边距
属性说明| content | 内容区，可以是我文本或者图片 |
| padding | 内边距，用于定义内容和边框之间的距离 |
| margin | 外边距，用于定义当前元素与其他元素之间的距离 |
| border | 边框，用于定义元素的边框 |
| width | 内容区的宽度 |
| height | 内容区的高度 |
这里我们有几个个注意点
- 我们常提到的盒子的宽度其实是width padding boreder，并不只是width
- 这里我们设置的width和heigth都是内容区,我们设置的背景颜色是针对整个盒子而言，所以在我们设置一个盒子的宽高后再设置内边距就会使盒子变大，因为内容区大小不会，变得是整个盒子的大小`
11.2内联元素和块元素在盒子模型中的用处和区别：
区别：
内联函数和块元素的相互转换：
display: 内联函数和块元素的相互转换所用属性
属性值：
inline(将一个元素当作一个内联元素显示)
block(将一个元素当作一个块元素显示)
inline-block(使一个元素既有块元素的特点又有内联元素的特点即既可以设置宽高又不会独占一行)
none:不显示元素，并且元素不会在页面继续占有位置
11.3内边距外边距
padding：内边距
margin：外边距
设置内边距(外边距也适用)的六种方式
padding可以分别设置上下左右的内边距
外边距的水平方向还有一个特别的属性值auto
auto一般用于设置水平方向，当只给左或者右方向设置margin那么就会在这个方向有最大的外边距，如果左右都设置auto那么就会水平居中
举个例子，让子盒子在父盒子里边水平和垂直都居中
12.1正常文档流
正常文档流就是将页面从上到下将页面分成一行一行的，其中块元素独占一行，相邻的行内元素在每一行从左到右依次排满，正常文档流就是默认情况下页面元素的布局情况
看一段代码：
<!doctype html> <html> <head><meta charset="utf-8" /><title></title> </head> <body><div></div><span></span><span></span><p></p><span></span><i></i><img /><hr /> </body> </html>作为正常文档流，那么它的布局就是
12.2脱离文档流
脱离文档流就是指脱离正常的文档流，正常文档流就是我们没有用浮动或者定位去改变默认的html文档的结构，换句话说，改变正常文档流有两种方法，浮动或者定位，这里我们主讲浮动
浮动的意义在于使块元素脱离文件流
属性值：float
属性值：
none：默认值
left：元素脱离文档流向页面左侧浮动
right：元素会立刻脱离文档流向页面的右侧浮动
关于浮动的注意点：
对于第四点：
12.3高度塌陷问题：
高度塌陷问题的产生
1.在文档流中如果不给父亲设置高度，那么父亲的高度默认是被子元素撑开的即：
如果我们为子元素设置向左浮动就会导致父亲高度的塌陷从而导致整个网页的布局被打乱
即：
第一种解决方法：
1.开启元素的bfc属性：
开启后有元素有如下属性：
(1)父元素的垂直边距不会和子元素重叠(子元素设置margin比父亲的margin大的时候，父亲不会受子类的移动而发生移动)
(2)元素不会被浮动元素所覆盖
(3)可以包含浮动的元素
2.开启bfc的方法：
(1)设置父元素浮动(这种方法对打乱的网页布局不会产生效果)
(2)为父元素设置同等高度，虽然可以但是如果子元素的高度发生改变就父元素就需要同等的改变
(3)将overflow设置一个非visible的值
第二种凯发k8官方网的解决方案：
先介绍一个清除其他元素对当前元素参生的影响：
属性clear:
属性值：
none：默认值不清除浮动
left：清除左侧浮动对当前元素参生的影响
right：清除右侧浮动对当前元产生的影响
both：清除两侧元素对当前元素影响最大的
比如有三个盒子：
如果对红色的元素设置左浮动蓝色设置右浮动那么就有:
设置clear的both属性(本质就是右侧浮动影响大)：
最终方案
(1)可以为高度塌陷的父元素内加一个div元素并且清除浮动带来的影响就very perfect
但是由于相当于多了一个盒子所以并不是最完美的解决方法
(2)通过after伪类向元素的最后添加一个空白的块元素然后对齐进行清除浮动
对于伪类里边的内容：
centent:必须要添加，这一项表示添加内容，当属性值什么都不加的时候就表示仅仅加了空的盒子(和加一个div相同)
display：表示是添加的是一个块装元素
clear：清除浮动的影响
13.1定位布局简介
1.定位布局：
作用：将指定元素放在指定的页面的位置
属性：position
属性值有static(默认值)，relative(相对定位)，absolue(绝对定位)，.fixed(固定定位)
13.2相对定位
position:relative：设置相对定位的时候需要用left,right,top,bottom四个属性设置偏移量
这里注意设置的偏移量会向相反方向移动
几个注意事项：
- 开启定位后不设置偏移量就不会发生任何变化
- 相对定位是相对于文档流中原来的位置来定位
- 相对定位的元素不会脱离文档流
- 相对定位会使元素提升一个层级(每个元素都有一个层级，当两个元素重合时层级高的元素会盖住层级低的元素)
- 相对定位不会改变元素的性质块元素还是块元素内联还是内联
例子：
当我们设置相对定位后：
13.2绝对定位
position:absolue：设置绝对定位的时候需要用left,right,top,bottom四个属性设置偏移量
注意事项：
- 开启绝对定位后会使文档脱离文档流
- 开启绝对定位后不设置偏移量元素得到位置不会发生变化
- 开启绝对定位后相当于离他最近的开启了定位的元素进行定位的如果祖先元素没有开启定位(相对定位绝对定位都行)则会相当于浏览器窗口进行定位(与浏览器最左上角对齐)
- 绝对定位会使元素提升一个层级
- 绝对定位会改变元素的性质(内联元素变成块元素，块元素的宽高被内容撑开)
举个例子：
当我们添加绝对定位的代码后：
4.fixed：固定定位
position:absolue设置绝对定位的时候需要用left,right,top,bottom四个属性设置偏移量
固定定位是一种绝对定位，但他们的不同点为：
- 固定定位永远都会相对于浏览器窗口进行定位
- 固定定义会固定在浏览器窗口的某个位置，不会随网页的滚动而滚动
举例：
14.1css继承性和重叠性
继承性和重叠性是css层叠式的两个特性
(1)css继承性：
后代元素能够继承祖先元素的文字样式(包含字体大小加粗颜色等)，不能继续盒子的样式
(2)层叠性：
如果多种选择器选择一个目标那么谁权重大听谁的
权重：id选择器>类选择器>标签选择器
计算权重的方法：数基础选择器个数id个数，类的个数，标签个数
依次比较，谁先大听谁的，比如id一样，那么听类的个数大的，如果类的个数也一样，那么比标签个数，如果标签也一样那么就比较先后顺序，听顺序靠后的。
如果没选中目标标签则需要靠继承，依靠就近原则，如果距离相同就比较权重，权重相同看先后顺序，听顺序靠后的
!important：直接把权重提升到最大
直接在一个属性后边加上!important
!important不能在就近原则中使用，当import所处标签是爷字辈还有一个爹字辈时会听爹字辈加粗样式
14.2：visibility和overflow
1.设置元素隐藏和显示属性
属性：visibility
属性值：
visible：默认值代表元素默认会在页面显示
hidden：元素隐藏不显示，但是会继续占有
2.父元素处理子元素移除部分
属性：overflow
属性值：
visible(默认值不会做出任何处理)
hidden(溢出的部分会被修剪不会显示)
scorll(为父元素加滚动条,不管子元素有没有溢出都会自动添加滚动条)
auto(需要添加水平滚动条就添加水平滚动条，需要垂直就添加垂直滚动条，不需要就不加)
总结
- 上一篇： 一天教会三岁表弟html，你值得拥有
- 下一篇： 剑指offer之斐波那契问题(c /j