CSS3权威指南读书笔记

最新推荐文章于 2021-07-25 17:56:19 发布

卡西莫多LPY

最新推荐文章于 2021-07-25 17:56:19 发布

阅读量684

点赞数

分类专栏： ☆Web之旅 ------ [HTML$CSS] 文章标签： css3 读书笔记 css 权威指南

本文链接：https://blog.csdn.net/ka_qimoduo/article/details/52245770

版权

☆Web之旅同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

------ [HTML$CSS]

2 篇文章 0 订阅

订阅专栏

CSS3权威指南笔记

12 CSS3简介

12.1

CSS3中，放弃采用总体结构，采用模块和模块化的结构和方式，便于浏览器分块支持，便于不同终端的浏览器支持不同模块。CSS3中新增了很多属性用来解决CSS2中比较难以处理的情况，比如图片边框的自适应高度。
HTML5与CSS3权威指南截图

13 选择器

13.1 选择器概述

使用元素的class属性有两个缺点：第一，class属性本身没有语义，是纯粹为CSS样式服务的，属于多余属性；第二，使用class属性，并没有把样式与元素绑定起来，各种元素都可以用，修改起来相当麻烦。CSS3中提倡使用选择器与样式绑定起来，便于修改和减少重复。^,$,*,等通配符的使用也提高了书写效率。

13.2 属性选择器

在CSS3中，增加了[att*=val]、[att^=val]、[att$=val]三个属性选择器，使得属性选择器有了通配符的概念

[att*=val]指定属性值中包含val字符
[att^=val]指定属性值开头为val字符
[att$=val]指定属性值结尾为val字符

13.3 结构性伪类选择器

13.3.1

伪类选择器和类选择器区别是：类选择器可以随便取名，但是伪类选择器是使用CSS中已经定义好的选择器，不能随便取名，最常用的是使用在a元素上的几种选择器
a:link{},a:visited{},a:hover{},a:active
伪元素选择器是指并不是针对真正的元素使用的选择器，而是使用针对CSS中已经定义好的伪元素使用的选择器。
在css中主要有四个伪元素选择器
1.first-line伪元素选择器：为元素第一行文字使用样式。
2.first-letter伪元素选择器：为元素中的第一个文字使用样式。
3.before伪元素选择器：用于在某个元素前插入一些内容。
4.after伪元素选择器：用于在某个元素后面插入一些内容。

13.3.2 选择器root、not、empty、target

root选择器将样式绑定到页面的根元素中。所谓根元素就是文档树中最顶层的元素。在HTML页面中就是html元素。
not选择器：如果想对某个结构元素使用样式，但是想排除这个结构下面的某个子结构元素，让它不适用这个样式，可以使用not选择器。
body *：not（h1）{};
排除body下的h1不使用和body一样的样式。
empty选择器：用来指定当元素内容为空白时使用的样式。
：empty{}
target选择器：使用target选择器来对页面中的某个terget元素指定样式，该样式只有在用户点击了页面中的超链接，并且跳转到target元素后起作用。

13.3.3 选择器：first-child、last-child、nth-child、nth-last-child

first-child父元素中第一个子元素
last-child父元素中最后一个子元素
nth-child父元素中指定序号子元素
nth-last-child父元素中指定序号子元素

nth-child（3）{}第三个子元素
nth-last-child（3）{}倒数第三个子元素
nth-child（odd）{}所有奇数个元素
nth-child（3n）{}所有是3的倍数个的元素

13.3.4 选择器：nth-of-type和nth-last-type

避免了使用nth-child出现的问题，只会选择指定元素类型中的符合参数的元素！

13.3.5 循环使用样式

nth-child（）
nth-child（）
nth-of-type（）
nth-last-type（）
参数中灵活运用a*n+b的形式可以循环为指定元素设定样式。

13.3.6 only-child选择器

作用相当于

    li：nth-child（1）:nth-last-child（1）{

}

13.4 UI元素状态伪类选择器

这种选择器指定的样式只有在元素处于某种状态时才起作用，默认状态下不起作用。在CSS3中，共有十一种UI状态元素伪类选择器分别是：：hover、：active、：focus、:enabled、：disabled、：read-only、：read-write、：checked、：default、：indeterminate、：selection

hover：鼠标移动到元素上时使用的样式
active:鼠标在元素上按下没有弹起时使用的样式
focus:元素获得光标时使用的样式，主要是输入框
enabled：当元素处于可用状态时的样式
disabled：当元素处于不可用状态时的样式
read-only：当元素处于只读状态时的样式
read-write：当元素处于非只读状态时的样式
checked:用来指定表单中的radio单选框或checkbox复选框处于选取状态是的样式。
default：用来指定页面打开时处于默认状态时的元素的样式。
indeterminate：用来指定页面打开时，如果一组单选框中任何一个单选框都没有被设定为选定状态时整组单选框的样式。
selection：用来指定当元素处于选中状态时的样式。

13.5 通用兄弟元素选择器

通用兄弟元素选择器，用来指定位于同一个父元素之后其他兄弟元素所使用的样式

14 使用选择器在页面中插入内容

使用before和after通过content来在元素前后插入元素
h2:before{
content:”lpy”;//插入文本，也可以写链接插入图片
color:white;
}

15 文字与字体相关样式

15.1 文字阴影text-shadow

    text-shadow:length length length color

前面三个length分别指阴影离开文字横方向距离、阴影离开文字纵方向距离、阴影模糊半径，color指代阴影颜色
前两个参数可以为负值，因为表明方向。第三个参数越大阴影半径越大，但是为可选参数，不写默认为0，颜色属性在各个浏览器支持情况不一样。可以为文字指定多个阴影，用逗号来分割。

15.2文本自动换行-word-break

HTML5与CSS3权威指南截图

    div{
    word-break：keep-all;
    }

15.3 让长单词和URl地址自动换行-word-wrap

    div{
    word-wrap：break-word；//在长单词内部换行
    word-wrap：normal；//浏览器默认换行
    }

15.4 在网页上显示服务器端字体-Web Font与@font-face属性

在CSS3之前，只有在本地安装的字体，才能在浏览器上正常显示，在CSS3中新增了Web Font，使用这个功能，网页中能够显示在服务器上安装的字体

    @font-face{
    font-family：WebFont;//声明使用服务器端字体
    src：url（“font/...otf”） format("opentype");//声明路径和格式
    font-weight:normal;
    }

font-face属性不仅可以显示服务器端字体，也可以显示客户端字体
HTML5与CSS3权威指南截图

15.5修改字体种类而保持字体尺寸不变-font-size-adjust

font-size-zdjust需要一个每个字体自带的aspect值，其中Times New Roman 的aspect值为0.46
div{
font-size：16px;
font-family:Times New Roman;
font-size-adjust:0.46;
}

16 盒相关样式

16.1 盒的类型

盒的基本类型分为两种block和inline,inline和inline-block的区别在于，inline元素是不可以设置宽高的，inline-block元素是可以设置宽高的。

inline-table是专属于table的一个display属性的一个类型，可以让本来是块级元素的table变成行内块。
list-item可以将多个元素作为列表来显示，同时在元素的开头加上列表标记。使用list-style-type属性，将值设为circle，列表标记为一个空心小圆圈。
run-in类型元素后面出现block元素，run-in类型的元素将被包含在block类型元素的内部。compact类型的元素将被放置在block类型元素的左边。
表格相关类型
none元素将不被显示

16.2 超出内容的显示

overflow属性有三个值

hidden：超出部分隐藏
scroll：超出部分滚动条显示
visible：正常显示
overflow还可以表示为overflow-x和overflow-y可以分别设置水平和竖直方向的超出显示样式。

16.3 对元素使用阴影 box-shadow

格式和对文字使用阴影格式一样，四个参数，第一个到第三个都是阴影的方向，第四个为阴影颜色。
使用时加浏览器兼容前缀。

16.4 指定针对元素的宽度和高度的计算方法

box-sizing有三个值

content-box 按内容指定宽高
padding-box 按内容+padding指定宽高
border-box 按内容+padding+border指定宽高
利用box-sizing属性是为了控制元素的总宽高，如果不使用该属性，默认是使用content-box，他只针对内容的宽度做了一个指定，没有对元素总宽度进行指定，有很多场合使用border-box属性值回事的页面布局更加方便

17 背景和边框相关样式

HTML5与CSS3权威指南截图

backgroud-clip有两个值border和padding，指定为border时，背景会包括border，指定为padding时，背景会从padding开始填充，不会填充border。
backgroud-origin有三个值：border、padding和content。当指定为其中的一个时，就是从这个的左上角开始填充背景。
background-size后面跟宽高值，其中一个可以为auto，意思为固定比例缩放这个属性。
background-break有三个值：bounding-box、each-box和continuous。第一种：背景图像在整个内联元素中进行平铺，第二种：在每一行进行平铺，第三钟：下一行图像接着上一行继续平铺。

page 318

项目	价格
Computer	$1600
Phone	$12
Pipe	$1

卡西莫多LPY

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3权威指南读书笔记

CSS3权威指南笔记12 CSS3简介12.1CSS3中，放弃采用总体结构，采用模块和模块化的结构和方式，便于浏览器分块支持，便于不同终端的浏览器支持不同模块。CSS3中新增了很多属性用来解决CSS2中比较难以处理的情况，比如图片边框的自适应高度。 13 选择器13.1 选择器概述使用元素的class属性有两个缺点：第一，class属性本身没有语义，是纯粹为CSS样式服务的，属于多余属性；第二，使
复制链接

扫一扫