CSS基础

CSS选择器

1、标签选择器：所有标签选中

2、id 选择器：id 唯一；字母、下划线和数字组成，数字不开头；只会选中一个元素；

3、类选择器：class="类名类名"（多类）

4、后代选择器：tag tag｛｝；

上面的 tag 可以是标签、id 和 class 选择器；可以无限往下发展；后代包含子和孙；

5、子元素选择器：tag>tag｛｝不能有空格

关于 table>tr>td 不起作用的解释：浏览器自动为 table 添加 tbody 导致的，用 table>tbody>tr>td 就可以选到每一个格子；

6、交集选择器：tagtag｛｝二者无任何符号

7、并集选择器：tag，tag｛｝

8、兄弟选择器

相邻兄弟：+ 连接；只能选中同级相邻后面的一个且中间不能隔开
通用兄弟：~ 连接；同级指定标签的后面，无论是否隔开

9、序选择器

（1）作用：用来选择同级别和同类型的第几个

（2）常用10个序选择器：其中的 n 可以为 odd（奇数）、even（偶数）和 xn+y

同级别不分类型

同级别同类型

10、属性选择器：p[id]；p[id=one]；p[attr^=value]：什么开头；p[attr$=value]：什么结尾；**p[attr*=value]：**包含什么

11、通配符选择器：*｛｝通配所有元素；标签多的时候性能差；

12、伪类选择器（a标签）

（1）作用：修改a标签不同状态的样式，序选择器实质也是伪类选择器；

（2）状态：访问前（：link）；访问后（：visited）；长按时（：active）；悬浮时（：hover）

（3）注意：出现顺序为：link visited hover active；伪类选择器放在标签选择器的后面；盒子相关属性放在标签里；文字背景相关属性放在伪类选择器里

13、伪元素选择器

（1）第一个字母和第一行

p {
    font-size: 12px;
}

p:first-letter {
    font-size: 24px;
    float: left;
}

p:first-line {
    font-weight: bold;
}

（2）内容之前和之后：其中的 content 既可以是字符串也可以是图片，添加的内容还能设置样式

li::before{
    /*content: url("abc.png");*/
    content: "POW!";
    background-color: skyblue;
    color:red;
}
li::after{
    content: "liafter";
}

CSS属性

1、文字属性

（1）font-style：italic（斜体）normal（正常）；

（2）font-weight：bold/bolder/lighter（粗细），还可以用数字（100-900）；

（3）font-size：20px，一定要带单位 px；在设置大小等的数字的时候必须指定单位才能生效，0除外；

（4）font-family：Arial，"楷体"，"微软雅黑"；中文和有空格的英文要用引号；中英文分别设置字体；从左到右进行字体的搜索，没有或者不能处理当前文字则自动切换；

（5）文字属性的简写： font：style weight size family

style 和 weight 可以交换位置，size 和 family 可以交换位置，但是 size 和 family 一定要在最后；
style 和 weight 可以省略不写，但是 size 和 family 不能省略；

2、文本属性

（1）文本装饰：text-decoration：underline | overline | line-through | none；

（2）文本转换：text-transform：capitalize | uppercase | lowercase | none；

（2）水平对齐：text-align：center；

（3）文本缩进：text-indent：2em；

p{
    letter-spacing: 0.5em;
    word-spacing: 2em;
    line-height: 1.5;
    text-align: center;
}

3、颜色控制属性（color）

（1）英文：表达有限，用于调试；

（2）RGB（red ，green ，blue）：取值0到255；三值一样为灰色；

（3）RGBA：前面和 rgb 一样，最后一个是透明度，取值0到1；

（4）十六进制：原理就是 rgb；两位16进制对一位 rgb；

（5）十六进制简写：#ffee00 == #fe0 ；必须是这个形式才能简写；

-----------------------tips---------------------------

关于 color 和 background-color ：前者设置文字颜色，后者设置背景颜色，可以应用于绝大部分的 html 元素；
css 注释和 java 的多行注是一样的；

-------------------------------------------------------

CSS三大特性

1、继承性：子元素可以使用父元素的某些属性

不是所有的属性都可以继承，只有以color、font、text和line开头的属性才可以继承；
继承性中的特殊性：a 标签的下划线和颜色以及 h 标签的大小是无法通过继承来改变的；

2、层叠性：同一元素多次设置了相同属性，则该属性会发生覆盖

3、优先级：确定如何层叠

（1）基本原则：

是否直接选中（间接选中指继承）：直接优先于间接，都是间接听离得近的；
是否相同选择器：直接选中的相同选择器谁在后面听谁的；
不同选择器：直接选中的不同选择器优先级：id》类》标签》通配符》继承》浏览器默认；

（2）权重原则：多选择器混用如何确定优先级

规则：先看 id 个数，再看 class 个数，然后是 tag 个数，三个都一样谁在后听谁的；

（3）优先级提升（！important）：提升直接选中的优先级，间接选中的没有作用；加在需要提升的属性的后面，只对该属性提升；

CSS显示模式

1、div和span

（1）div 是容器级别的标签（可以嵌套其他的标签），span 是文本级标签（只能嵌套文本、图片和超链接）；

2、显示模式

（1）标签分类：html---容器级和文本级；css---块级和行内元素；

（2）显示模式：

块级元素：独占一行；默认和父级元素一样宽；可以设置宽高；
行内元素：不独占一行；默认和内容一样宽；不可以设置宽高；
行内块级：既不独占一行，又可以设置宽高；img；

（3）总结：容器级的都是块级，文本级的除了 p 以外都是行内元素

（4）显示模式转换：

三种显示模式可以通过设置 display 属性相互转换；
display 的3种取值：block（块级）、inline（行内）、inline-block（行内块级）；
关于 display：none 和 visibility： hidden 的不同：前者相当于将元素从文档流中剔除，后者仅仅是将元素隐藏，相应的会在页面保留其位置；

CSS背景和精灵图

1、背景

（1）颜色：background-color：red；

（2）图片：background-image：url（images/1.jpg）；图片小会自动进行平铺

（3）平铺：background-repeat：repeat | no-repeat | repeat-x | repeat-y

应用：网页背景的平铺可以减小图片的大小，提升访问的速度；

（4）定位（background-position）

background-position：水平垂直（写数值的时候要带单位，数值可以为负）
应用：图片核心内容的居中显示，设置背景，而不是设置 img

（5）背景关联和缩写

背景关联：background-attachment：scroll（滚动）| fixed（固定）；
背景缩写：background：颜色图片平铺关联定位；其中任何一个都可以省略；

（6）背景图片和插入图片的区别

背景不会占用容器的空间；
背景有定位的属性，更方便位置的调整；
插入的语义强于背景，想被搜索引擎搜索到用插入；
图片的合成用 div 和背景图片；

2、精灵图

一种图像的合成技术，减少请求的次数；就是将很多小的图片合成为一张大图；
设置容器的宽高，再利用背景的定位属性来确定要展示的图片的位置（可以使用 fireworks 软件来进行辅助）；

盒子模型

1、边框属性（border）

（1）四种写法

统一设置：border：宽度样式颜色-----只有样式不能省略
分别设置：border-top | bottom | left | right：宽度样式颜色
按要素设置：border-width | style | color：上右下左（顺时针）；省略的时候上下一致，左右一致；
非连写：border-top-style（少用）

（2）边框圆角（border-radius）

2、内边距（padding）和外边距（margin）

（1）内边距（padding）：border 到内容的间距

连写：padding：上右下左；可以省略，省略后上下一致，左右一致；
不连写：padding-top | left：
说明：设置内边距后，容器会被拉伸；内边距的部分也有背景；

（2）外边距（margin）：标签与标签之间的间距

写法：margin | margin-top：注意事项与 padding 一样；
注意：外边距没有背景；
外边距的合并：水平方向是叠加，垂直方向是合并，合并的时候谁大听谁的；

3、盒子模型（box）

（1）盒子模型的概述：手机盒子

所有的 html 都可以设置宽高、边框、外边距和内边距；

（2）盒子宽度和高度

内容的宽度和高度：设置的 width 和 height；
元素的宽度和高度：width + 内边距*2 + border宽*2；
元素空间的宽度和高度：width + 内边距*2 + border宽*2 + 外边距*2；

（3）盒子的box-sizing 属性

作用：通过设置这个属性可以保证元素再增加 border 和 padding 属性之后，元素的宽和高不变
属性值：content-box（默认） | border-box（宽高恒定）

（4）两个盒子的嵌套

小盒子在大盒子的居中可以通过设置 margin 和 padding 来实现；
居中首选 padding ，其次 margin；
margin-top 产生问题解决：给大盒子设置 border；
margin：0 auto（可以设置水平居中，垂直居中不行）；
text-align （让盒子里的文字和图片居中）和 margin：0 auto（让盒子自己水平居中）；

（5）清空默认边距

作用：方便盒子的定位和宽高的设置；
常用的方法：*｛margin：0；padding：0；｝
开发用的方法：百度 css reset

（6）行高和字号

文字默认在一行的行高中垂直居中；
一行文字的垂直居中：设置行高（line-height）和盒子的高度相等即可；
多行文字居中：只能设置padding；
盒子中的文字：padding 以左边的为准，右边的有换行造成的误差；padding-top 的设置要注意行高带来的影响；

CSS浮动

1、网页的布局方式

（1）标准流（文档流）排版

块级元素垂直排版；
行内和行内块级是水平排版；

（2）浮动流排版

是一种半脱离标准流的排版方式；
浮动流只有水平排版，设置相对于父级元素的左对齐或者右对齐，没有 center，不可以使用 margin：0 auto；
浮动流不区分块级和行内元素，更类似于行内块级元素的特点，即可水平排版又可以设置宽高；

（3）定位流排版

2、浮动（float）

（1）浮动元素脱标

定义：浮动的元素脱离标准流，像是从标准流里被删除了一样；
影响：会造成元素的覆盖问题；

（2）浮动元素排序规则

相同方向，先浮动的在前；
不同方向，左浮找左，右浮找右；
元素浮动后的位置与浮动前的位置相关：浮动前在第几行浮动后就在第几行，这里的浮动前的位置是在前面的元素都浮动之后的位置；
浮动是有顺序的浮动；

（3）浮动贴靠和字围现象

贴靠：父元素的宽度不够，浮动元素会逐级往上贴靠，都不够放的话，会一直贴到最上级的父元素；
字围：浮动元素不会覆盖文字，文字会自动围绕在浮动元素的周围；

（4）浮动在网页排版的应用

网页的排版：垂直方向标准流，水平方向浮动流；
网页的排版练习

清除浮动

--浮动前

--浮动后

1、清除方式一

（1）浮动元素的高度问题

标准流中内容可以撑起父元素的高度；
浮动流中内容无法撑起父元素的高度；

（2）方式一：给前面的盒子设置高度（少）

2、清除方式二

（1）给后面的盒子设置 clear 属性；

（2）clear 的属性值：

none 默认：左浮找左，右浮找右；
left：不找前面的左浮；
right：不找前面的右浮；
both：不找前面的浮动；基本都用这个；

（3）clear 导致的 margin-top 失效

margin-top 如果是相对于父元素的，则必须要为父元素设置边框才有效；
前一个盒子的元素都浮动之后，前面的元素就可以看作没了，此时设置的 mt 是相对与 body 的，而不是前一个盒子的，而 body 又没有边框，所以 mt 无效；

3、清除方式三：隔墙法（少）

（1）外墙

实质就是在两个盒子的中间加一个块级元素，然后给这个块级元素设置 clear both；
带来的问题：后面盒子的 mt 可以用，而前面盒子的 mb 不能用；
解决：通常 mt 和 mb 都不用，直接给中间的块级元素设置高度；

（2）内墙

实质是在前面一个盒子的最后一个子元素的后面添加一个块级元素，然后 clear both；
这种方法 mt、mb和给添加的块级设置 height 都是可行的；
内墙可以撑起前一个盒子的高度，而外墙不可以；

4、清除方式四

（1）伪元素选择器：在指定的元素之前或者之后添加一个元素

div::before/after{
    content:....;
    visibility:hidden;
}

（2）伪元素选择器清除浮动

div::after{
    content:'';
    display:block;
    height:0px;
    visibility:hidden;
    clear:both;
}

/*兼容低版本的IE*/
div｛
    *zoom:1;
｝

5、清除方式五

（1）overflow：hidden 清除浮动

/*给前面的盒子设置overflow属性*/

.box1{
    overflow:hidden;
    *zoom:1;
}

（2）overflow：hidden的其他作用

裁剪掉超出标签的内容；
父子元素，子元素设置 mt 无效的问题，可以在父元素设置overflow；

6、总结

clear（后一个盒子加）、overflow（前一个盒子加）和伪元素选择器用来清除浮动比较多

7、练习：网易注册界面的实战*

CSS定位（position）

1、相对定位（relative）

（2）定义：相对于自己以前在标准流中的位置来移动，不会脱标；

（3）使用：结合 top bottom left right 来使用；

（4）注意：

相对定位水平和垂直的方向上只能选择一个，如：有 left 就没有 right；
区分块级和行内元素；
给相对定位的元素设置margin 和 padding 都是对原来的位置起作用，而不是移动后的位置；
相对定位中原来的位置极其重要；

（5）应用：位置的微调；结合绝对定位来使用；

2、绝对定位（absolute）

（1）position：absolute；

（2）概念：相对于 body 来定位

（3）注意：

绝对定位是脱标的，且不区分行内和块级；
结合 top 等来使用；
绝对定位的参考点默认是body，如果祖先元素中有定位流元素，则以该元素为参考点，如果祖先中存在多个定位流则就近原则，这里的静态流不含 static；
body 作为参考点是以当前的显示页面作为参考，而不是以整个页面作为参考；
绝对定位会忽略祖先元素的padding；

（4）和相对定位的配合使用：

单用相对定位的局限：会占用标准流的空间；
单用绝对定位的局限：受浏览器宽高的影响；
配合使用解决以上的局限：使用方法：子绝父相；

（5）绝对定位的水平居中：left：50%；margin-left：-元素宽度的一半（用 margin：0 auto 是无效的）；

3、固定定位（fixed）

相对浏览器窗口固定，而不是网页；脱标且不区分行内和块级；

4、静态定位（static）

（1）元素默认就是静态定位；

（2）元素都有一个 z-index属性，默认值为 0；

（3）z-index 属性是用来控制定位流的覆盖关系的，谁大谁在上面；

（4）默认情况，定位流会覆盖标准流；后面的定位流会覆盖前面的定位流；

（5）在设置了z-index 属性的条件下，谁大谁在上；

（6）z-index 的从父现象：在父元素没有设置 z-index 的前提下，谁的 z-index 大谁在上，在父元素设置了 z-index 的前提下，父级的 z-index 大，谁就在上；

5、补充text-align、line-height和vertical-align

（1）text-align：只对文字图片和 a 标签有效；

（2）line-height：居中效果只对文字和图片有效（包含标签中的文字和图片）；

（3）vertical-align：针对 inline 元素有效，将 display 设置为 table-cell 也是有效的；

过渡模块

1、基本使用

使用的三要素：属性变化；哪个属性需要过渡；效果的时长；
hover伪类所有的标签都可以用；
注意：多属性的过渡效果的写法如下；

div{
    transition-property:width,height;
    transition-duration:5s,5s;
}

2、其他属性

transition-delay：设置动画延迟的；
transition-timing-function：设置动画的速度的（linear、ease-in-out）

3、连写

格式：transition：属性时长速度延迟；
后面两个值可以省略；
多属性依旧使用逗号隔开即可；
多属性的过渡都一样的话可以这样写：transition：all 5s；

2d转换模块

1、基本入门

（1）平移：transform：translate（x，y）；

（2）旋转：transform：rotate（45deg）；

（3）缩放：transform：scale（x，y）；以1为界，大于为放大，水平垂直方向的缩放一样时可以只写一个值；

（4）综合：transform：rotate（45deg） translate（x，y） scale（x，y）；

中间以空格隔开；
旋转的同时坐标系也跟着旋转，会影响后面的平移；

2、形变中心点

（1）默认就是元素的中心点，可以通过设置来改变；

（2）transform-origin三种取值：像素、百分比、关键字

（3）transform-origin：50% 50%；

3、旋转轴向

（1）rotateX（）；rotateY（）；rotateZ（）；

（2）默认绕 Z 轴转；

4、透视属性

（1）就是近大远小的视觉效果；

（2）perspective：500px；后面的属性值的含义是从多远的距离看，越近效果越明显；

5、阴影

（1）盒子阴影：box-shadow：水平偏移垂直偏移模糊度阴影扩展颜色

简写只要前面的3个属性即可；
阴影分内外阴影，默认外阴影，默认颜色和盒子的内容颜色一样；

（2）文字阴影：text-shadow：水平偏移垂直偏移模糊度颜色

颜色的默认和盒子的一样；

（3）翻转菜单的练习

动画模块

1、基本使用

（1）动画与过渡的异同：

动画无需人为触发，而过渡需要；
二者都包含三要素；

（2）动画的三要素：

动画名称：animation-name：fff；
动画时长：animation-duration；
动画内容：

@keyframes fff｛
    from{
        ...
    }
    to{
        ...
    }
｝

/*创建动画的第二种形式*/
@keyframes fff｛
    0%{
        ...
    }
    50%{
        ...
    }
    100%{
        ...
    }
｝

2、其他属性

（1）animation-delay：动画延迟；

（2）animation-timing-function：动画的速度；

（3）animation-iteration-count：动画的循环次数；

（4）animation-direction：是否来回运动；

（5）animation-play-state：动画暂停或播放状态；

（6）animation-fill-mode：规定动画开始或者结束时的状态（none、backwards、forwards、both）；

3、连写和应用

（1）连写

animation：名称时长速度延迟次数往返
简写保证三要素即可

（2）应用

云层效果
无限滚动

3d转换模块

1、概述

要想呈现3d效果给父元素加 transform-style：preserve-3d；

2、正方体

ul li 布局；每个面进行平移和旋转的变化，注意旋转的角度；
为保证前后上下四个面的内容正确显示，先旋转再平移，旋转的角度分别为 90、180、270、0
左右的两个面和内容无关，随意；

3、长方体

在正方体的基础上前后上下四个面水平方向进行缩放；左右两个面根据缩放的情况增加平移的距离；
父元素被缩放了，子元素也会跟着缩放；

4、3d播放器

背景图片随浏览器窗口的变化自动调整；
3d的旋转相册；
桃心动画；

背景相关

1、背景尺寸相关

（1）属性 background-size

（2）属性值：

具体像素；
百分比；
宽或高等比拉伸（只需把宽或高设置成为 auto 即可）；
cover：等比拉伸知道背景填满元素；
contain：等比拉伸直到宽或者高达到元素额界限；

2、背景图片定位区域属性

（1）background-origin：设置背景图片从盒子模型的哪个部分开始填充；

（2）属性值：padding-box（默认）；border-box；content-box；

3、背景绘制区域属性

（1）background-clip：属性值和 origin 的属性值是一样的；默认是border；

4、多重背景图片的设置

（1）说明：就是给一个元素设置多张的背景图片，用背景定位的属性来布局；

（2）格式：分开书写也可以

div{
    background:url("") no-repeat top left,url("") no-repeat top right;
}

媒体查询（@media）

1、概述

使用 @media 查询，可以针对不同的媒体类型定义不同的样式；
@media 可以针对不同的屏幕尺寸设置不同的样式，可以用来设计响应式的页面；
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面；

2、针对浏览器尺寸的CSS

@media screen and (min-device-height: 768px) and (max-device-width: 1024px) {
    body{background:grey}
}

3、针对特定方向的CSS

@media screen and (orientation: landscape) {
    #nav { float: left }
}

@media screen and (orientation: portrait) {
    #nav { float: none }
}
/*landscape 是宽大于高*/

4、针对不同设备的CSS

（1）设备宽高

@media screen and (min-device-height: 768px) and (max-device-width: 1024px) {}

（2）像素比率

@media (device-pixel-ratio: 2) {
    body { background: url(twiceasbig.png) }
}

移动设备禁用缩放：head 里面设定元标签

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

（3）设备的DPI

@media screen and (resolution: 326dpi) { /* */ }
@media screen and (min-resolution: 96dpi) { /* */ }

（4）宽高比

@media screen and (device-aspect-ratio: 16/9) { /* */ }

5、其他的 @ 规则

（1）@import “test.css”; 引入其他的样式表，可以将长而复杂的样式表剪短用这个引入，更加方便管理

（2）@font-face 用来引入我们想要使用的字体

@font-face {
    font-family: "font of all knowledge";
    src: url(fontofallknowledge.woff);
}
p { font-family: "font of all knowledge", arial, sans-serif; }

posted on 2019-03-04 10:40 狗吃鱼阅读(336) 评论(0) 编辑收藏举报

刷新页面返回顶部

狗吃鱼

CSS基础

CSS选择器

1、标签选择器：所有标签选中

2、id 选择器：id 唯一；字母、下划线和数字组成，数字不开头；只会选中一个元素；

3、类选择器：class="类名 类名"（多类）

4、后代选择器：tag tag｛｝；

5、子元素选择器：tag>tag｛｝ 不能有空格

6、交集选择器：tagtag｛｝ 二者无任何符号

7、并集选择器：tag，tag｛｝

8、兄弟选择器

9、序选择器

10、属性选择器：p[id]；p[id=one]；p[attr^=value]：什么开头；p[attr$=value]：什么结尾；p[attr*=value]：包含什么

11、通配符选择器：*｛｝通配所有元素；标签多的时候性能差；

12、伪类选择器（a标签）

13、伪元素选择器

CSS属性

1、文字属性

2、文本属性

3、颜色控制属性（color）

CSS三大特性

1、继承性：子元素可以使用父元素的某些属性

2、层叠性：同一元素多次设置了相同属性，则该属性会发生覆盖

3、优先级：确定如何层叠

CSS显示模式

1、div和span

2、显示模式

CSS背景和精灵图

1、背景

2、精灵图

盒子模型

1、边框属性（border）

2、内边距（padding）和外边距（margin）

3、盒子模型（box）

CSS浮动

1、网页的布局方式

2、浮动（float）

清除浮动

1、清除方式一

2、清除方式二

3、清除方式三：隔墙法（少）

4、清除方式四

5、清除方式五

6、总结

7、练习：网易注册界面的实战*

CSS定位（position）

1、相对定位（relative）

2、绝对定位（absolute）

3、固定定位（fixed）

4、静态定位（static）

5、补充text-align、line-height和vertical-align

过渡模块

1、基本使用

2、其他属性

3、连写

2d转换模块

1、基本入门

2、形变中心点

3、旋转轴向

4、透视属性

5、阴影

动画模块

1、基本使用

2、其他属性

3、连写和应用

3d转换模块

1、概述

2、正方体

3、长方体

4、3d播放器

背景相关

1、背景尺寸相关

2、背景图片定位区域属性

3、背景绘制区域属性

4、多重背景图片的设置

媒体查询（@media）

1、概述

2、针对浏览器尺寸的CSS

3、针对特定方向的CSS

4、针对不同设备的CSS

3、类选择器：class="类名类名"（多类）

5、子元素选择器：tag>tag｛｝不能有空格

6、交集选择器：tagtag｛｝二者无任何符号

10、属性选择器：p[id]；p[id=one]；p[attr^=value]：什么开头；p[attr$=value]：什么结尾；**p[attr*=value]：**包含什么