CSS3知识点笔记————基础（五星）

添加小程序，兑换各种视频教程/数据资源。

1. 作用：美化和修饰HTML。又叫层叠样式表，样式表，级联样式表。

2. 优点：

2.1 可以更好的将格式与结构分离。

2.2 可以更好的控制页面的布局。

2.3 可以制作体积更小，下载更快的网页。

2.4 可以将多个网页同时更新，比以前更快更容易。

3.使用CSS的三种方式：

3.1 内联式：即将样式定义在单个HTML元素中。

语法：<ANY style="样式声明1：值1；样式声明2：值2；-----">。

3.2 内部样式表：将样式定义在<head><style>选择器（即标记名如p.div）{ 若干样式声明 }</style></head>标记中。

3.3 外部样式表：将样式声明定义在独立的css文件（.css）中，在网页中使用。

语法：<head><link rel="Stylesheet" href=".css"><head>

4.CSS的特征：

4.1 继承性：即父元素的一些样式，可以继承给子元素直接使用。

4.2 层叠性：一个元素声明多个不冲突的样式规则，可以全部应用。

4.3 优先性：浏览器的缺省设置（User Agent Stylesheet）<内部样式表和外部样式表（后定义者优先）<内联方式。

4.4 !important：在属性值后面添加!important强调其最优先。

选择器权重： !Important（无穷大∞） > 行内style样式（1000） > id（100） > 类/伪类/属性（10） > 标签选择器（1） > 全局选择器（0）

5.选择器：

5.1 定义作用：规范哪些元素可以用声明好的样式。

5.2 基础选择器的分类：

5.2.1 通用选择器：语法：*{若干样式声明}，不推荐使用，影响性能。

5.2.2 元素选择器：某标记对应的所有元素。语法：标记名{若干样式声明}。

5.2.3 类选择器：标记元素的class属性值加上前面的 . 号作为选择器。语法： .类名{若干样式声明}。

用法：1. 运行一个元素同时又多个类选择器<ANY class="class1 class2class3">。

2. 元素名 . 类名{若干样式声明} 。

5.2.4 ID选择器：元素的ID值作为选择器。语法：#ID值{若干样式声明}。

5.2.5 群组选择器：多个或多种选择器放在一起，用逗号隔开一起声明。

语法：选择器1，选择器2，选择器3---{若干样式声明}。

5.2.6 后代选择器：语法：选择器1 选择器2{若干样式声明}。

5.2.7 子代选择器：语法：选择器1>选择器2{若干样式声明}。

5.2.8 伪类选择器：匹配某些元素的不同状态，如超链接单击前中后字体颜色效果。

语法：（选择器）：伪类选择器{若干样式声明}。

分类：1、链接伪类：专门控制 a 标记效果的伪类选择器

（1）、:link：定义超链接未被访问时的样式效果

（2）、:visited：定义超链接访问后的样式效果。

2、动态伪类：

（1）、:hover：定义鼠标悬停在元素上的时候的效果。

（2）、:active：定义元素被激活的瞬间的样式效果(被点击的一瞬间)。

（3）、:focus：定义元素获取焦点时的样式效果。

5.2.9 复杂的选择器：

（1）兄弟选择器：兄弟元素——具备相同父元素的平级元素称之为“兄弟元素”。

注意：兄弟选择器，只能向后找，不能向前找。

1）.相邻兄弟选择器：作用——获取紧紧挨在某元素后的兄弟元素。

语法：选择器1+选择器2{ 若干样式声明 }。

2）.通用兄弟选择器：作用——获取某元素后所有满足条件的兄弟元素。

语法：选择器1~选择器2 { 若干样式声明 }。

（2）属性选择器：作用——允许通过元素所附带的属性及其值来匹配元素。语法：

1.[attr ]： attr表示页面中所有元素的任意属性名称。如[id] [class],表示匹配页面中所有附带id ，class属性的元素。

2.选择器[ attr ]：表示匹配附带attr属性并满足指定选择器的元素。如div[id], .ipc[name]。

3.[attr2][attr1]：表示匹配同时附带attr1,attr2属性的页面元素。

4.[attr=value]：表示匹配attr属性值为value的元素，其中这个value,可以用引号也可不用引号。

5.[attr&=val][attr^=val][attr*=val]：分别表示属性值以val开头，以val结尾，包含val；

（3）伪类选择器：作用——为了匹配元素不同的状态。

1.目标伪类：突出显示获得的html锚点元素。即跳到锚点记号上时，记号的样式，匹配被激活的锚点。

语法： target{} ，如：div:target{}.

2.结构伪类：作用——通过元素之间的结构关系来匹配元素。

1） first-child：表示匹配的元素是属于父元素的第一个子元素。

2） last-child：表示匹配的元素是属于父元素的最后一个子元素。

3） nth-child(n)：表示匹配元素是属于其父元素中的第n个子元素，如 :nth-child(1) ===first-child;

4） empty：匹配没有子元素的元素。

5） only-child：匹配只有其父元素只有唯一一个子元素的元素。

3.否定伪类：作用——将满足指定选择器的元素给排除出去。

语法： not(元素选择器 )。如 tr:not(:first-child){};

4.伪元素选择器：伪类——匹配的是完整的元素；伪元素——某元素中的部分内容。

语法：1 :first-letter(::first-tletter),匹配某个元素的首字符。

2 :first-line(::first-line),匹配某个元素的首行。

3 ::selection,匹配被用户选取的内容。注意：此选择器只能修改背景颜色和文本颜色,需要2个冒号。

5.内容生成：after/:before{content:""}使用css向某元素内插入一段内容。content:该属性也可应用于div中添加图片content:url(...);

6.:enabled/:disabled/:checked/：分别表示被激活，被禁用，被选中（单选/复选按钮）；

7.新增一个属性值initial：可直接取消某个元素的指定样式使其变为默认值；如color:initial;

（4）伪元素选择器：

1. : before(::before)：匹配到某元素内容区域之前。

2. :after(::after)：匹配到某元素内容区域之后。

3. 属性——content：向匹配到的位置处增加内容。如： div:before{ content:"字符串"/url();} 在:after/before{这里面的属性都是针对content}。

4. 解决浮动元素父元素高度的问题，解决外边距的溢出问题。

（5）.弹性布局（Flexible Layout ,又叫可伸缩布局，常用来替换<frame>）：

1. 为了解决某元素中子元素的布局方式，为布局提供最大的灵活性。

2. 弹性布局的容器，即父元素。弹性布局的项目，即要实现布局效果的元素，简称为项目。主轴（Aain Axsis），决定项目们排列顺序的一根轴，如果按X（Y）轴排列，那X（Y）就是主轴。交叉轴（Cross Axsis），与主轴相交叉的那根轴。

3. 语法：

1.弹性布局的容器：只有将元素变为弹性布局的容器后，子元素们才能按照弹性布局的方式进行排列。将该父元素添加一个属性display:flex/inline-flex;分别表示将块级元素边弹性容器，将行内元素边弹性容器。注意：元素变弹性容器后，子元素的float,clear,vertical-align将全部失效，且子元素变为块级元素，可以修改尺寸，且容器的text-align也会失效。

2.容器的属性：该组属性加载容器上，负责控制所有项目的特征的。属性——

1）.flex-direction：指定容器的主轴及其排列方向，X轴为默认主轴。取值：row/row-reverse/column/columu-reverse分别表示默认值主轴为X轴且从左到右排列，主轴为X轴且从右向左排列，主轴为Y轴且起点在顶端，主轴为Y轴且起点在底端。

2）.flex-wrap：当一个主轴排列显示不了所有子元素（项目）时，可以指定换行方式。取值：nowrap/wrap/wrap-reverse/;分别表示默认值不换行直接压缩子元素（项目）宽度，向下左边换行，向上左边换行。

3）.flex-flow：是flex-direction和flex-wrap的缩写；取值：row nowrap/direction wrap;分别表示默认值，分别取值。

4）.justify-content：作用——定义项目在主轴上对齐方式。取值：flex-start/flex-end/center/space-between/space-around;分别表示在主轴的起点对齐，在主轴的终点对齐，在主轴的居中对齐，两端对齐，让每个项目两端的距离是相等的。

5）.align-items：定义项目在交叉轴上的对齐方式。取值：flex-start/flex-end/center/baseline/strentch;分别表示在交叉轴的起点对齐，终点对齐，居中对齐，基线对齐，将在交叉轴上占满所有的空间。

6). flex-basis：用于指定弹性盒子基准宽度，因为在弹性盒子中，盒子的最终宽度不是width值决定的。所以用flex-basis=80px优先级高度width=80px,所以用flex-basis来设置弹性盒子的宽度。
注意：flex: 是flex-grow,flex-shrink,flex-basis三个属性的缩写。

6.尺寸：

（1）.尺寸单位：px,pt(磅/点 1pt=1/72英寸),%,cm,mm,em(占父元素倍数),rem（占根元素倍数）,in（1英寸=2.54cm）。

1）.颜色单位：rgb,rgba,#rrggbb,#rgb,英文单词。

2）.尺寸的属性：width/height,max-width/height,min-width/height。

（2）.允许修改尺寸的元素：所有的块级元素（div,p,h#---），除单复选外的控件，img和table。

（3）.溢出处理：属性——overflow，overflow-x，overflow-y。

取值——visible(默认值，溢出可见)，hidden（溢出隐藏），scroll（显示滚动条），auto（溢出才显示滚动条）。

7.边框：边框的属性语法：border：width style(solid/dotted/dashed) color; 表示四边的设置线宽，线类型，线颜色。

（1）.边框的细分：单边多属性（border-方向：width style color），单边单属性（border-方向-属性：属性值），多边单属性（border-属性：属性值）。

（2）.特殊情况：不显示边框，边框矩形由4个三角形组成。

（3）.边框倒角：属性——border-(某个角)-radius: 表示4个角（某个角）的倒角。取值——以px，或百分比为单位的数值。

（4）.边框的阴影：属性——box-shadow;取值——h-shadow v-shadow blur spread color insert; 分别表示水平，垂直位移（正负，以px,或百分比为单位），模糊大小，阴影大小，阴影颜色，内阴影。

（5）.边框轮廓：指在边框外加一层轮廓。属性——outline:width style color;

8.框模型：页面元素皆为框，框模型（Box-Model）定义了内容，内边距，外边距的一种方式。

（1）.外边距：属性——margin-(某个方向)；表示四个方向（某个方向的外边距距离），多个方向取值可以简写。取值——1.以px,百分比为单位的正负数字。其中正负表示上下左右移动。2.auto，必须是块级元素设置了宽度下，水平居中。

（2）.默认具有外边的元素——body,h#,p,pre,ol,ul,dd,dl; 可以通过margin:0px设置外边距为0。

（3）.外边距的合并以及外边距的溢出。

（4）.内边距：属性——padding;与外边一样的用法。

（5）.重置框模型的计算方式：属性——box-sizding:content-box(默认值)/border-box。

9.背景属性：

（1）.背景颜色——background-color :颜色值;

（2）.背景图片——background-image: url(图片的路径);

（3）.背景图片重复——background-repeat: repeat/repeat-x/repeat-y/no-repeat;分别表示默认值，横向，纵向，不平铺。

（4）.背景图片大小——background-size: x y/x% y%/cover/contain; 分别表示以px为单位，百分为单位，全覆盖，不一定全覆盖。

（5）.背景图片的固定——background-attachment: scroll/fixed; 分别表示默认值随滚动条滚动，固定不随滚动条滚动。

（6）.背景图片位置——background-position: x y/x% y% / 关键字关键字；分别表示以x y 方向的pt为单位的位置，百分比为单位的位置，左右上下中关键字。

（7）.背景图片的简写——background: color url() repeat attachment position;定义多背景图，即在一个元素中显示多个背景图像，还可以将背景图像进行重叠，即将上面属性依次赋值多个并用逗号隔开；

10.渐变：

（1）.渐变的主要因素——色标：即颜色和位置。

（2）.渐变的三种方式——线性，径向，二者组合。

（3）.线性渐变：属性——background-image: linear-gradient(angle,color- point1,...);angle-填充方向，取值为to top/to right/toleft/tobottom或者以deg为单位的0~360度。color-point:色标，即颜色和位置。如red 0%,blue 50% 。

（4）.浏览器的兼容——在linear-gradient前加浏览器前缀。

11.文字格式化属性：

（1）.字体属性：

1. 字体类型——font-family:取值为字体类型，中文类型需要加引号。

2. 字体大小——font-size: 取值为以 px 或 pt 或em 或 rem 为单位的数字。

3. 字体加粗——font-weight: normal/bold/value; 分别表示默认值正常，加粗，无单位数字。

4. 字体样式——font-style: normal/italic; 分别表示默认值正常，斜体。

5. 字体小型大写字母—font-variant: normal/small-caps; 分别表示默认正常，小型大写字母。

6. 字体属性的简写——font: style variant weight sizefamily;注意:简写时是必须有font-family。

7. 自定义字体——@font-face{....}:是由以上属性及值组成的对象。

（2）.文本属性：

1. 文本颜色——color:颜色值。

2. 文本水平排列方式——text-align:left/right/center/justify。

3. 文本的划线修饰——text-decoration:none/underline/line-through/overline; 表示无划线，下划线，删除线，上划线。

4. 文本的行高——line-height: 取值为以px为单位的数值或无单位的字体倍数。

5 .文本首行缩进——text-indent: 取值以px 为单位的数值。

6. 文本阴影——text-shadow: h-shadow v-shadow blurcolor;文本阴影属性接收一个以逗号分隔的阴影效果的列表，阴影效果按照给的的顺序，可以出现相互覆盖的效果。

7. 文本溢出——text-overflow:clip/ellipsis/ellipsis-word;表示文本超出显示框的处理，取值分别表示不显示（...）直接裁剪/显示（...）省略标记插入的位置是最后一个字符/显示（...）省略标记插入的位置是最后一个词。

8. 强制换行/不换行——white-space：nowrap/normal。强制不换行，文本会超出显示。

9. 字母间距——letter-spacing：1px。

10. 单词/中文字间距——word-spacing：1px。
（3）.文本多列布局——适合纯文本设计：

1. column-width：表示一篇文字中定义文本每列宽度；

2. column-count：表示将一篇文字分成几列显示；

3. column-gap：定义相邻列之间的距离；

4. column-rule:style width color：表示相邻列之间的分割线的样式(dashed/dotted/solid/none等)，宽度，颜色；

5. column-span:none/all：表示标题只在本栏显示/横跨所有栏显示；

6. column-fill:auto/balance：表示栏的高度是否统一。Auto表示随内容变化，balance表示以内容最多的那列高度统一；

12.表格的属性：

（1）.表格的常用属性：

1. 边框属性——border，css中只有table,td才有边框属性。

2. 尺寸属性——width,height。

3. 框模型——padding。

4. 文本属性——1.font-*; 2.text-*;3.line-height。

5. 单元格的数据垂直对齐方式——vartical-align:top/center/bottom。

（2）.表格的特有属性：

1.边框合并：即将双线边框合并成单线边框。属性——border-collspase: sparate/collspase; 表示默认值，合并成单线边框。

2.边框边距：相邻边框的距离。属性——border-spading:x y; 表示水平，垂直间距，需要在边框合并默认值下才能有效。

3.表格标题的位置——caption-side:top/bottom;

4.显示规则：即td宽高由内容还是设定值决定——table-layout:auto/fixed; 分别表示默认值以内容决定，有设定tr值决定。

13.定位：定位的分类：

1.普通流定位（即文档流定位），默认定位方式。

2.浮动定位（专门解决多个块级元素在一行显示）。

3.相对定位。

4.绝对定位。

5.固定定位。

（1）.普通流定位：特点：

1、每个元素在页面上都有自己的空间。

2、每个元素都是从其父元素的左上角开始排列。

3、页面中的块级元素，都是按照从上到下的方式逐个排列，每个元素独占一行。

4、页面中的每个行内元素和行内块元素都是按照从左到右的方式来排列的。

（2）.浮动定位：属性——float: left/right/none;特征——

1、元素会被排除在文档流之外(即脱离文档流),元素就不再占据页面空间，其它未浮动元素要上前占位。

2、浮动元素会停靠在其父元素的左边或右边，或其它已浮动元素的边缘上。

3、浮动元素只能在当前行浮动。

4、浮动定位解决的问题:让多个块级元素在一行内显示。

浮动定位效果：

1、父元素显示不下所有浮动子元素时，最后一个将换行，但是，有可能被卡住。

2、元素一旦浮动起来之后，宽度将以内容为准(未指定宽度的情况下)。

3、元素一旦浮动起来之后，将变成块级元素（允许修改尺寸，能正常处理外边距）行内元素和行内块元素浮动起来之后，就变成块级元素。

4、文本，行内元素，行内块元素是采用环绕的方式来排列的，是不会被浮动元素压在底下的，而是会巧妙的避开浮动元素。

清除浮动：清除前面元素浮动对本元素产生的位置的影响。

1 、属性：clear:none/left/right/both;分别表示默认值不清

除，清除前面元素左浮动带来的影响，右浮动带来的影响，清除浮动带来的影响。

2、浮动元素对父元素高度的影响及其解决方案。显示方式——属性——display:none/block/inline/inline-block/table;分别表示默认值不显示，将元素边块级，将元素边行内级，将元素边行内块级，将元素边table一样的表现形式。

显示效果：

1、显示/隐藏属性——visibility;不脱离文档流，仍然占据空间。取值——visible(默认值，可见的) / hidden (隐藏);

2、透明度属性——opacity;改变整个元素的透明度。取值——0.0~1.0之间的小数。

3、垂直对齐属性——vertical-align;设置td,img,行内块级元素2端的文本相对于它们的垂直对齐方式。img后垂直对齐取值——top/middle/bottom/baseline(默认值，基线对齐)；在网页开发过程中，通常会将页面所有图片的。默认值baseline修改成其他值，消除基线对齐。用于图片后面文字的对齐方式。

光标：鼠标悬停在元素上时，鼠标的表现形式，如小手，沙漏，旋转，十字----属性—cursor:default(默认值)/pointer(小手)/crosshair(十字)/text(I)/wait(等待旋转图形)/help(帮助)。

（3）.相对/绝对/固定定位：

1.属性——position:static(默认值)/relative/absolute/fixed;分别表示默认值，相对定位，绝对定位，固定定位。

2.偏移属性——top/bottom/right/left:取值以px为单位的正负数值。并以其为基准线的移动。

3.相对定位——元素会相对于它自己原来的位置，偏移某个距离。相对定位的元素，原位置（空间）会被保留，不允许被其他元素所占据。语法： position:relative;top/right/left/bottom: 正负值。

4.绝对定位：

（1）.特证：脱离文档流，不占页面空间，后面元素上前补位。绝对定位的元素会相对于离它最近的，已定位的祖先元素去实现位置的初始化和偏移。如果不存在已定位的祖先的元素，那么就相对于body取实现位置的初始化和偏移（其top/right/bottom/left都是相对于祖先已定位元素或body左上角的偏移位置）。

（2）.语法：position:absolute;top/right/left/bottom: 正负值。

（3）.特点：绝对定位的元素会脱离文档流，所有会压在其他元素之上。绝对元素会变成块级元素。绝对定位的元素，margin可以正常使用，在正常下，margin:0 auto; 会失

效，但是在该绝对元素top/right/left/bottom:取值全都是0的非正常情况下下margin:auto;有效。

5.固定定位：

（1）.让元素始终固定在页面的某个位置处，不受到滚动条滚动而范式位置的影响。

（2）.语法：position:fixed;配合top/right/left/bottom实现位置的改变。

（3）.特点：脱离文档流，固定元素会变块级。可修改尺寸。永远都是相对于body实现位置的固定。

6.堆叠顺序：

（1）.改变元素定位方式之后，有可能会发生堆叠效果，实际上是由堆叠顺序来决定排位效果的。如纸牌游戏出牌那张高出其他张。

（2）.语法：属性——z-index:取值为没有单位的数值，数值越大，越靠前，越面向用户更近。前后移动，取值为负表示正常之下。

（3）.注意：必须是已定位元素才能用z-index。如果z-index相同的话，则后出现的在上面。在父子级元素中，永远都是子压在父元素之上，不受到z-index控制的。

14.盒模型：任何一个块级/行内块级标签都可以视为一个矩形盒子，由width、height、padding、margin、border组成。box-sizing取值决定了是标准盒模型还是怪异盒模型。

CSS3知识点笔记————基础（五星）相关推荐

[新手必备]Python 基础入门必学知识点笔记
Python 作为近几年越来越流行的语言,吸引了大量的学员开始学习,为了方便新手小白在学习过程中,更加快捷方便的查漏补缺.根据网上各种乱七八糟的资料以及实验楼的 Python 基础内容整理了一份极度适 ...
中职计算机基础知识点笔记2
中职计算机基础知识点笔记1 文章目录 1.3数字化信息编码与数据表示 1.3.1进制计数制 1.3.2进制转换 1.3.3原码.反码.补码 1.3.4常用信息编码 1.4计算机安全防护知识 1.4.1 ...
中职计算机基础知识点笔记1
中职计算机基础知识点笔记1 中职计算机基础知识点笔记2 中职计算机基础知识点笔记3 中职计算机基础知识点笔记4 中职计算机基础知识点笔记5 ps:如果对算法或者数据结构有兴趣的职高生,可以考虑考虑浙江 ...
中职计算机基础知识点笔记5
中职计算机基础知识点笔记1 中职计算机基础知识点笔记2 中职计算机基础知识点笔记3 中职计算机基础知识点笔记4 中职计算机基础知识点笔记5 文章目录 3.1计算机网络概述 3.1.1计算机网络概念和功 ...
HTML5+CSS3学习笔记（第1章）HTML基础
HTML5+CSS3学习笔记(第1章)HTML基础今天是居家隔离第一天,自学HTML5. 1.1HTML概述什么是HTML HTML是一种标记语言.(Hyper Text Markup langu ...
尚硅谷新版Web前端HTML5+CSS3知识点集合篇【p1-p8】
尚硅谷新版Web前端HTML5+CSS3知识点集合笔记篇尚硅谷新版Web前端HTML5+CSS3全套基础教程完整版(初学者零基础入门) p1(22:55) 一.软件的分类: 1.系统软件 -wind ...
前端HTML5+CSS3学习笔记
HTML5+CSS3学习笔记 ==CSS第一天== 一.css简介二.css语法规范三.css代码风格四.css选择器的作用五.css基础选择器 1.标签选择器: 2.类选择器 3.多类名选择 ...
Vue 2.x 常用知识点笔记（万字笔记）
Vue 2.x 笔记常用知识点笔记,有错误欢迎指点哦~ 字数超过了一万字,得细品目录 Vue 2.x 笔记 1.新建Vue实例 2.阻止生成生产提示 3.模板语法 3.1 插值语法 3.2 指令语 ...
【软考-软件设计师精华知识点笔记】第八章算法分析设计
前言由于笔记复制到CSDN样式失效,没有精力再重新完整的检查并设置一遍样式,有积分的可以前往下载word.pdf.有道云笔记版本. 需要说明的是,下载的内容与本篇分享内容一致,只有样式的区别[比如重 ...

CSS3知识点笔记————基础（五星）

添加小程序，兑换各种视频教程/数据资源。

CSS3知识点笔记————基础（五星）相关推荐

最新文章

热门文章