CSS_02

最新推荐文章于 2023-11-08 09:21:46 发布

潘毅康

最新推荐文章于 2023-11-08 09:21:46 发布

阅读量481

点赞数 1

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_43808599/article/details/102215205

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS字体样式属性

font-size:字号大小

font-size属性用于设置字号，推荐使用像素单位px，绝对长度单位使用较少。
在这里插入图片描述
注意：

谷歌浏览器默认的文字大小为16px
但是不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小。一般给body指定整个页面文字的大小

font-family:字体

font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑，可以使用如下CSS样式代码：

p{ font-family:"微软雅黑","备用1","备用2";}

解决兼容性问题：可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体，如果都没有的话，最后就会选用电脑默认字体
注意：

现在网页中普遍使用14px+，尽量使用偶数的数字字号。ie6等老式浏览器支持奇数会有bug。
中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。
如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: “Times New Roman”;。
尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。

CSS Unicode字体

在 CSS 中设置字体名称，直接写中文是可以的。但是在文件编码（GB2312、UTF-8 等）不匹配时会产生乱码的错误。xp 系统不支持类似微软雅黑的中文。

方案一：你可以使用英文来替代。比如 font-family:“Microsoft Yahei”。

方案二：在 CSS 直接使用 Unicode 编码来写字体名称可以避免这些错误。使用 Unicode 写中文字体名称，浏览器是可以正确的解析的。

font-family: “\5FAE\8F6F\96C5\9ED1”，表示设置字体为“微软雅黑”。
在这里插入图片描述

font-weight:字体粗细

字体加粗除了用 b 和 strong 标签之外，可以使用CSS 来实现，但是CSS 是没有语义的。

   font-weight属性用于定义字体的粗细，其可用属性值：normal、bold、bolder、lighter、100~900（100的整数倍）。

小技巧：

   数字 400 等价于 normal，而 700 等价于 bold。  但是我们更喜欢用数字来表示。

font-style:字体风格

字体倾斜除了用 i 和 em 标签之外，可以使用CSS 来实现，但是CSS 是没有语义的。

font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：

normal：默认值，浏览器会显示标准的字体样式。

italic：浏览器会显示斜体的字体样式。

oblique：浏览器会显示倾斜的字体样式。

注意：

平时我们很少给文字加斜体，反而喜欢给斜体标签（em，i）改为普通模式。

font:综合设置字体样式 (重点)

font属性用于对字体样式进行综合设置，其基本语法格式如下：

 选择器{font: font-style  font-weight  font-size/line-height  font-family;}

注意：顺序必须这样，其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。

所有CSS字体属性
Property	描述
font	在一个声明中设置所有的字体属性
font-family	指定文本的字体系列
font-size	指定文本的字体大小
font-style	指定文本的字体样式
font-variant	以小型大写字体或者正常字体显示文本。
font-weight	指定字体的粗细。

CSS外观属性

color:文本颜色（本质上不是文本颜色是前景色）

color属性用于定义文本的颜色，其取值方式有如下3种：

1.预定义的颜色值，如red，green，blue等。

2.十六进制，如#FF0000，#FF6600，#29D794等。实际工作中，十六进制是最常用的定义颜色的方式。

3.RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。

注意：如果使用RGB代码的百分比颜色值，取值为0时也不能省略百分号，必须写为0%。

line-height:行间距

行高 = 上距离 + 内容高度 + 下距离

如果行高等高度文字会垂直居中
如果行高大于高度文字会偏下
如果行高小于高度文字会偏上

ine-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。
line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px

一般情况下，行距比字号大7.8像素左右就可以了。

text-align:水平对齐方式

text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性。其可用属性值如下：

left：左对齐（默认值）

right：右对齐

center：居中对齐

text-indent:首行缩进

text-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位。

1em 就是一个字的宽度如果是汉字的段落， 1em 就是一个汉字的宽度

text-decoration 文本的装饰

text-decoration 通常我们用于给链接修改装饰效果

值描述
none 默认。定义标准的文本。
underline 定义文本下的一条线。下划线也是我们链接自带的
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。

  所有CSS文本属性。
属性	描述
direction	设置文本方向。
letter-spacing	设置字符间距
text-shadow	设置文本阴影
text-transform	控制元素中的字母
unicode-bidi	设置或返回文本是否被重写 
vertical-align	设置元素的垂直对齐
white-space	设置元素中空白的处理方式
word-spacing	设置字间距

标签显示模式（display）

标签的类型(显示模式)

HTML标签一般分为块标签和行内标签两种类型，它们也称块元素和行内元素。具体如下：

块级元素(block-level)

每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。

块级元素的特点：

（1）总是从新行开始

（2）高度，宽度,行高、外边距以及内边距都可以控制。

（3）宽度默认是容器的100%

（4）可以容纳内联元素和其他块元素。
注意：- 这些标签p,h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。

行内元素(inline-level)

行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。
常见的行内元素有a、strong、b、em、i、del、s、ins、u、span等，其中span标签最典型的行内元素。
行内元素的特点：

（1）和相邻行内元素在一行上。

（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。

（3）默认宽度就是它本身内容的宽度。

（4）行内元素只能容纳文本或则其他行内元素。（a特殊）

注意：- 链接里面不能再放链接。
- 特殊情况a里面可以放块级元素，但是给a转换一下块级模式最安全。

行内块元素（inline-block）

在行内元素中有几个特殊的标签img 、input 、td，可以对它们设置宽高和对齐属性，故称它们为行内块元素。

行内块元素的特点：

（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。
（2）默认宽度就是它本身内容的宽度。
（3）高度，行高、外边距以及内边距都可以控制。

标签显示模式转换 display

块转行内：display:inline;

行内转块：display:block;

块、行内元素转换为行内块： display: inline-block;

此阶段，我们只需关心这三个，其他的是我们后面的工作。

CSS 背景(background)

- 语法：
      background-color:颜色值;   //默认的值是 transparent  透明的
      background-image : none | url (url)  //背景图片默认是none，我们提倡 背景图片后面的地址，url不要加引号
      background-repeat : repeat | no-repeat | repeat-x | repeat-y  //背景图像在纵向和横向上平铺（默认的）|背景图像不平铺|背景图像在横向上平铺|背景图像在纵向平铺
      background-position : length || lengthbackground-position : position || position  //背景位置  
   背景位置：  
    - 必须先指定background-image属性
	- position 后面是x坐标和y坐标。 可以使用方位名词或者 精确单位。
	- 如果指定两个值，两个值都是方位名字，则两个值前后顺序无关，比如left  top和top  left效果一致
	- 如果只指定了一个方位名词，另一个值默认居中对齐。
	- 如果position 后面是精确坐标， 那么第一个，肯定是 x  第二的一定是y
	- 如果只指定一个数值,那该数值一定是x坐标，另一个默认垂直居中
	- 如果指定的两个值是 精确单位和方位名字混合使用，则第一个值是x坐标，第二个值是y坐标
	 background-attachment : scroll | fixed  背景固定：随着滚动而滚动|背景固定
	 background:transparent url(image.jpg) repeat-y  scroll center top ;//背景简写
	 background: rgba(0, 0, 0, 0.3); //css3的背景透明
	 - 最后一个参数是alpha 透明度  取值范围 0~1之间
	 - 我们习惯把0.3 的 0 省略掉  这样写  background: rgba(0, 0, 0, .3);
 	 - 注意：  背景半透明是指盒子背景半透明， 盒子里面的内容不受影响
	 - 因为是CSS3 ，所以 低于 ie9 的版本是不支持的。

CSS 三大特性

层叠继承优先级是我们学习CSS 必须掌握的三个特性。

CSS层叠性

所谓层叠性是指多种CSS样式的叠加。

是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉

比如先给某个标签指定了内部文字颜色为红色，接着又指定了颜色为蓝色，此时出现一个标签指定了相同样式不同值的情况，这就是样式冲突。

样式冲突，遵循的原则是就近原则。那个样式离着结构近，就执行那个样式。
样式不冲突，不会层叠

CSS继承性

所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。

 恰当地使用继承可以简化代码，降低CSS样式的复杂性。子元素可以继承父元素的样式（text-，font-，line-这些元素开头的都可以继承，以及color属性）

CSS优先级

定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。

注意一些特殊的情况，具体如下：

继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。
行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，他拥有比上面提高的选择器都大的优先级。
CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。

CSS特殊性（Specificity）

关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity，我们称为CSS 特性或称非凡性，它是一个衡量CSS值优先级的一个标准具体规范入如下：

specificity用一个四位的数字串(CSS2是三位)来表示，更像四个级别，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。

总结优先级的权重排名1最高：

使用了 !important声明的规则。
内嵌在 HTML 元素的 style属性里面的声明。
使用了 ID 选择器的规则。
使用了类选择器、属性选择器、伪元素和伪类选择器的规则。
使用了元素选择器的规则。
只包含一个通用选择器的规则。
同一类选择器则遵循就近原则。
CSS 背景(background)

css圆角边框

border-radius:length;

其中每一个值可以为数值或百分比的形式。
技巧：让一个正方形变成圆圈

如果是要做矩形的圆角，则针对矩形的高度设置为高度的一半就可以了，用精确单位

盒子阴影(CSS3)

box-shadow:水平阴影 垂直阴影 模糊距离（虚实）  阴影尺寸（影子大小）  阴影颜色  内/外阴影；

在这里插入图片描述

CSS 布局的三种机制

1.普通流（标准流）

块级元素会独占一行，从上向下顺序排列；
- 常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行；
- 常用元素：span、a、i、em等

浮动
- 让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示。
定位
- 将盒子定在浏览器的某一个位置——CSS 离不开定位，特别是后面的 js 特效。

浮动的必要性

假设：多个盒子(div)水平排列成一行或者实现盒子的左右对齐，这些需求用标准流就做不了
行内块（inline-block）虽然可以做,但是他却有自己的缺陷,中间会有空白缝隙：

浮动(float)

概念：元素的浮动是指设置了浮动属性的元素会

脱离标准普通流的控制
移动到指定位置。
作用
让多个盒子(div)水平排列成一行，使得浮动成为布局的重要手段。
可以实现盒子的左右对齐等等…
浮动最早是用来控制图片，实现文字环绕图片的效果(最初的网页是用表格布局的浮动是用来制作文字环绕效果的)。

  选择器 { float: 属性值; }

浮动的特点：

1.加了浮动的盒子是浮起来的，漂浮在其他标准流盒子的上面。
2.加了浮动的盒子是不占位置的，它原来的位置漏给了标准流的盒子。
3.特别注意：浮动元素会改变display属性，类似转换为了行内块，但是元素之间没有空白缝隙
4. 浮动的元素互相贴靠一起的，但是如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐
注意：浮动和标准流的父盒子搭配
浮动是脱标的，会影响下面的标准流元素，此时，我们需要给浮动的元素添加一个标准流的父亲，这样，最大化的减小了对其他标准流的影响。

浮动元素与父盒子的关系

子盒子的浮动参照父盒子对齐
不会与父盒子的边框重叠，也不会超过父盒子的内边距

浮动元素与兄弟盒子的关系

在一个父级盒子中，如果前一个兄弟盒子是：

浮动的，那么当前盒子会与前一个盒子的顶部对齐；
普通流的，那么当前盒子会显示在前一个兄弟盒子的下方。

清除浮动

为什么需要浮动
在这里插入图片描述

总结：

由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响
准确地说，并不是清除浮动，而是清除浮动后造成的影响
清楚浮动的本质：清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了

清除浮动的方法

1).额外标签法(隔墙法)

是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>，或则其他标签br等亦可。
优点：代码简洁

缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

2).父级添加overflow属性方法

可以给父级添加： overflow为 hidden| auto| scroll 都可以实现。
优点：代码简洁

缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

3).使用after伪元素清除浮动

:after 方式为空元素额外标签法的升级版，好处是不用单独加标签了

 .clearfix:after {  content: ""; display: block; height: 0; clear: both; visibility: hidden;  }   

 .clearfix {*zoom: 1;}   /* IE6、7 专有 */

优点：符合闭合浮动思想结构语义化正确
缺点：由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。
代表网站：百度、淘宝网、网易等

4).使用双伪元素清除浮动

 .clearfix:before,.clearfix:after {   content:"";  display:table; }.clearfix:after { clear:both;}.clearfix {  *zoom:1;}

ps切图片，分两大步：

1). 用切片选中图片

利用切片工具手动划出
图层菜单—新建基于图层的切片
利用辅助线来切图 – 基于参考线的切片
2). 导出切片

文件菜单 – 存储为web设备所用格式 ---- 选择我们要的图片格式 ---- 点存储 — 别忘了选中的切片

辅助线和切片使用及清除
以上方法切图有点麻烦故我们借用一个插件

CSS属性书写顺序(重点)

建议遵循以下顺序：

布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
自身属性：width / height / margin / padding / border / background
文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …