CSS学习笔记(2)

痛定思痛。 2022-08-07 17:48 206阅读 0赞

21、CSS样式的优先权：当样式有冲突时，听谁的？

a、四种方式的优先权：内联式\[行内样式\]--->内嵌式\[内部式\]--->链接式\[外部式\]--->@import导入式

CSS优先权：就近原则

作用范围越小，优先权越高

离要修饰目标越近的样式优先权越高。

b、选择符优先权：行内>id>class>标签选择符

我们可以采用 !important语法来提升重要性\[优先权\]

p\{

background-color:\#FFCCCC !important;IE6不支持该语句

background-color:\#66CCCC;

22、CSS控制字体

功能                                语法

设置字体样式                  font-style:normal\[正常\] italic\[斜体\]

修饰文字                         text-decoration:none\[正常\] underline\[下划线\] overline\[上划线\] line-through\[删除线\]

字符间距                         letter-spacing:normal\[默认\] length\[长度单位\]

单词间距                         word-spacing:normal\[默认\] length\[长度单位\]

CSS控制文本

功能                                语法

设置对象中文本缩进        text-indent:2em  可以为负值

文本水平对齐方式            text-align:left\[左\] right\[右\]

对象中空白处理               white-space:normal\[自动换行\] pre\[换行和空白受保护\] nowrap\[强制在同一行显示\]

文本大小写控制               text-transform:none\[正常大小\] capitalize\[每个单词的第一个字母转换成大写\]

uppercase\[转换成大写\] lowercase\[转换成小写\]

元素的垂直对齐方式       vertical-align:sub\[设置文字为下标\] super\[设置文字为上标\] top\[把元素的顶端与行中最高元素的顶

端对齐\] text-botton\[把元素的底端与父元素字体的底端对齐\]

CSS控制链接---CSS伪类

状态                                语法

未访问的链接                  a:link\{color:\#FF0000\}

已访问的链接                  a:visited\{color:\#00FF00\}

鼠标移动到链接上           a:hover\{color:\#FF00FF\}

鼠标按下链接                  a:active\{color:\#0000FF\}

如果鼠标放上效果不起作用，请修改链接状态的顺序 L--V--H--A

自定义链接的CSS

a.类名称:状态

CSS伪类用于向某些选择器添加特殊的效果

语法： 选择符:伪类名称\{属性:值\}

例如：

a:hover\{color:\#FF00FF\}

:focus设置对象在成为输入焦点（该对象的onfocus事件发生）时的样式（IE6/7不支持）

CSS伪类语法：

元素名称:伪类名称\{属性:值\}

例如：超链接的鼠标经过状态

23、在应用CSS样式时，一定要注意它的默认值，因为不同的浏览器它的CSS默认值不同。

24、CSS选择符命名

规范的命名也是web标准中的重要一项，标准的命名可以使代码更加易读，而且利于搜索引擎搜索，比如定义两个 div ，一个id

命名为“div1”，另外一个命名为“news”，肯定第二个比较容易读，而且搜索引擎抓取率要高，在团队合作中还可以大大提高工作效

率。为了达到这种效果我们就要规范化命名（语义化命名）！

关于CSS命名法，和其他的程序命名差不多，主要有三种：驼峰，帕斯卡，匈牙利法。

驼峰命名法：除第一个单词首字母小写外，其余所有单词首字母都大写。例如：\#headerBlock, .navMenuRedButton

帕斯卡命名法：与驼峰相似，区别就是所有单词首字母都大写。例如：\#HeaderBlock, .NavMenuRedButton

匈牙利命名法：是需要在名称前面加上一个或多个小写字母作为前缀。例如：\#head\_navigation, .red\_navMenuButton

前两种比较常用，其实CSS命名就一个原则"容易理解，方便协同工作"。

页面模块的常用CSS命名

头：header                           热点：hot

内容：content                       新闻：news

尾：footer                             下载：download

导航：nav                             广告：banner

侧栏：sidebar                      页面主题：main

栏目：column                      子导航：subnav

左中右：left center right      子菜单：submenu

登录条：loginbar                 版权：copyright

标志：logo                          友情链接：friendlinks

页面外围控制整体布局宽度：wrapper       菜单：menu

25、CSS盒子模型

![Center][]

1)、W3C组织建议把所有网页上的对象都放在一个盒子(box)中----盒子模型

2)、设计师可以通过创建定义来控制这个盒子的属性，这些对象包括段落、列表、标题、图片以及层<div>。

3)、盒子模型主要定义四个区域：内容(content)、填充(padding)、边框(boder)和边界(margin)。

a、盒子的内容 content

b、盒子的边框 border

c、盒子的边框与内容之间的距离称为--padding，内边框(内部丁)

d、多个盒子存在，盒子与盒子之间的距离称为边界--nargin，外边距(外补丁)

4)、这里的边界我们也称之为：外边距、外补丁；填充也叫：内边距、内部丁

5)、整个盒子模型在页面中所占的宽度是由：左边界+左边框+左填充+内容+右填充+右边框+右边界组成

26、CSS盒子的相关属性

1)、内容属性：内容本身的宽=width，内容本身的高=height

2)、内填充属性：内容与边界之间的距离 padding

\*\*在定义盒子的宽度时，要考虑到内填充、边框、边界的存在。如果增加了内填充，整个盒子的宽度值要在减去增加的内填充

的值。

CSS控制元素的尺寸

功能                                                         语法

设置元素宽度                                           width:100px;

设置元素告诉                                           height:100px;

设置元素某一个方向外边距                      margin-top/right/bottom/left:10px;

通知参数个数不同来设置元素的外边距    margin:10px; 上下左右4个方向

margin:10px 20px; 上下  左右

margin:10px 20px 30px; 上  左右  下

margin:10px 20px 30px 40px;上  下  左  右

设置元素的内边距                                     padding:上  右  下  左

CSS控制边框属性

功能                                                          语法

设置边框粗细                                            border-top-width:12px;

设置边框样式                                            border-top-style:solid\[实线\] dashed\[虚线\]

设置边框颜色                                            border-top-color:\#00000

设置某一边框属性的简捷方式                   border-边框位置:线宽 线型 颜色

设置某一元素四条边框属性的简捷方式\[仅限于四条边框属性完全相同\]       border:线宽 线型 颜色

边框属性说明：

CSS语法：border:border-width || border-style || border-color

根据语法，推理出它的使用方法：

如果只写border，则后面要跟着的是，三个不同的子属性，第一个  粗细   第二个 样式  第三个  颜色

边框样式：粗细为两个像素   实线  蓝色

border：2px   solid   blue

padding：参数简写方式

如果一个参数时：表示上 右 下 左 四个方向

padding:20px;

如果两个参数时：第一个参数表示上下，第二个表示左右

padding:20px 50px;

如果三个参数时：第一个参数表示上，第二个表示左右，第三个表示下

padding:20px 30px 50px;

总结：padding参数中，如果没有值，就去对面找

27、注意：在使用外边距，要注意浏览器的兼容性。除了只为0的情况下，所有的非零的值后面都要加单位。

由于各个浏览器存在着，内外边距的默认值，而且还不同。我们需要将所有浏览器的默认内外边距，都从零开始计算。为了提

高效率，用到哪些元素，就把哪些元素的默认值归零。

CSS属性，虽然有继承的特点，但是并不是所有的属性都有继承。

28、关于列表的属性：（存在兼容性问题，一般：list-style:none 不要列表符号）

list-style：list-style-image---列表的图片

list-style-postion---列表符号位置

list-style-type---列表的样式

29、CSS小技巧

a、让盒子，水平居中。将对象的左右边界设置为auto；

b、让盒子中的内容垂直居中，设置行高=盒子的高度，但是不要换行。

30、CSS中的元素分类

我们在布局页面的时候，会将HTML标签（元素）分成两种，块状元素和内联元素（我们平时用到的标签div和p就是块状元素，

链接标签a 就是内联元素），可以通过CSS修改元素的类型。

a、块状元素：\{display:block\}

一般是其他元素的容器，可容纳内联元素和其他块状元素，块状元素排斥其他元素与其位于同一行，宽度(width)和高度

(height)起作用。常见块状元素为div、p、body、h1~h6等。（块状元素很霸道：能设宽和高！独占一行！）

b、内联元素\{display:inline\}

内联元素只能容纳文本或者其他内联元素，它允许其他内联元素与其位于同一行，但宽度(width)和高度(height)不起作用。

常见内联元素为a、em、span等。

内联元素很温柔：

不能设宽和高！

不影响换行！

（就像橡皮筋包住字）

31、CSS控制背景

功能                              语法

背景                              background:颜色 图片 平铺方式 固定方式 位置

背景颜色                       background-color:\#CCC

背景图像                       background-image:url(背景图片的位置及全称)

背景图像的重复方式     background-repeat:\[repeat、no-repeat、repeat-x、repeat-y\]

背景图像的位置            background-position:top\[left center right\]   center\[left center right\] bottom\[left center right\]，x坐标 y坐标

\[第一个值水平位置，第二个值是垂直位置。左上角是0 0。单位是像素(0px 0px)\]

背景图像的依附方式     background-attachment:\[scroll、fixed\]

a、背景图片默认情况下是进行水平与垂直方向上的平铺。

b、默认背景图片在元素的左上角显示

c、背景图片的依附方式：固定的含义，将突破固定在屏幕（可视区域）的某个位置。兼容性 IE6只有html与body两个元素支持

这个属性值。

32、CSS Sprites（CSS精灵）

制作翻转按钮效果的两种方法：

第一种：我们需要两张图片，一张正常状态的图片，一张鼠标经过图片，做这种按钮思路就是，设置链接 a 的背景为第一张图片

a:hover 的背景为第二张图片

![Center 1][]          ![Center 2][]

第二种：将上面两张图片合并成一张图片、设置成按钮的背景，然后将 a:hover 的背景向上移动相应的像素即可

![Center 3][]

CSS精灵技术：主要是为了减少http请求。

33、CSS布局方式：

1）、默认文档流方式

以默认的html元素的结构顺序显示

2）、浮动布局方式

通过设置html元素的float属性显示

什么是浮动？浮动（float）是CSS实现布局的一种方式，包括div在内的任何元素都可以以浮动的方式进行显示。浮动是将块元

素，霸道属性独占一行的行为取消，允许别人与他一行。浮动其实是这个块从原来的文档流模式中分离出来，它后面的对象，就视

它不存在。兼容性：当IE6父元素中的子元素的高度超过了父元素的高度，IE6 默认会把父元素的高度自动增加。

值：

none：不浮动

left：对象向左浮动，而后面的内容流向对象的右侧

right：对象向右浮动，而后面的内容流向对象的左侧

3）、定位布局方式

通过设置html元素的position属性显示

34、常用的布局效果，例如，一行并列式，就是在一行中显示几个块元素。

35、ul与li 默认情况下是块元素，要想让他们在一行显示，就要用到浮动。

[Center]: /images/20220805/a078ec84f51548248649829228f47e43.png
[Center 1]: https://img-blog.csdn.net/20150422094730407?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaGFuYm82MjI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 2]: /images/20220805/7c6963be4beb483da1433d16c9090531.png
[Center 3]: /images/20220805/d9b83befe9274df996f59ccba56cb441.png