Please enable Javascript to view the contents

CSS入门系列之二

 ·  ☕ 5 分钟

文章还在编辑中

边框border

边框的组成:粗细、样式、颜色

1
2
border:1px solid red;
border-right:5px dashed black;

**边框的单一方向/条件设置:**比如只改变上边框的颜色border-top-color,使用这种方式可以单独指定颜色,而无需同时指定粗细、样式、颜色。

边框的特性:边框的形状是非矩形,所以可以使用边框实现三角形:

背景background

内容可以撑开容器,而背景是不会占用容器

属性 描述
background-color:gray 背景颜色
background-image:url(bg.jpg) 背景图
background-repeat:no-repeat 背景重复
background-position:10px 20px 背景图位置调整(第一个代表x轴,第二个为y轴)
background-attachment:fixed 背景图是否跟随滚动条滚动(fixed固定在浏览器可视区域,scroll不固定 )
background: red url(img.jpg) repeat-x 10px 20px scroll background复合(简写)样式:属性不要求按顺序书写

background-position: 的几个特殊值

  • 对于x轴:left,right,center
  • 对于y轴:top,bottom,center;如果省略 y 轴的值,则其默认为center

文本

示例 描述
font-weight 文字着重
font-style:italic 文字倾斜
font-size:16px 文字大小
font-family: 字体

前缀都是 font,那么也存在一种简化的写法:

1
2
3
4
5
/* font复合样式需要注意书写顺序 */
font: font-style | font-weight | font-size | font-family

/* 也可将行高结合在一起 */
font: bold italic 26px/30px "楷体"

行高line-height

某书中的解释:行高指的是段落的行距,即段落内每行之间的距离。

妙味课堂某老师的解释:文字在一行里占用的位置。

**注意:**行高将会影响到该行内文字所处的位置。是贴着一行的底部书写,还是贴着顶部书写,还是在一行的中间书写。(要想观察的更加仔细,可以截图,然后在图片编辑器中详细查看)

容器高度height与行高line-height:

当行高与容器高度相同时且文字只有一行时文字会垂直居中显示。

文字大小的测量

每种字体的设计都不一样,课程中老师讲解的"宋体”,感觉对于其它字体并不适用。

多行文字测量行高

多行文字测量行高的方法(在PS中测量设计师给的图片):

  1. 确认文字大小
  2. 确认两行文字之间的空隙大小
  3. 空隙大小除以2,得到的值就是每行文字的上下的空隙大小
    • 这里当文字为奇数时,那么文字的上方要比下方少一个像素
  4. 通过辅助线测量多行文字的行高

文本设置

属性 说明
color 文字颜色
text-align 文本对齐方式
text-indent 首行缩进(em缩进字符,缩进不能使用固定值)
text-decoration 文本修饰
letter-spacing 字母间距
word-spacing 单词间距(以空格为解析单位,对中文不大适用)
white-space 强制不换行

文字与文字之间的距离是由word-spacing加上空格的宽度来决定的,所以用word-spacing这个属性的时候一定要注意空格的宽度

一个空格有多大?

宋体字体下文字大小的一半。

盒模型

网易产品模块练习

出错点:

  1. background 不可拆分
  2. 文本垂直居中
  3. padding会改变元素大小
  4. word-spacing的宽度计算
  5. 单词换行
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
#netease-model > div {
    border-left:2px solid #beafe2;
    border-right:2px solid #beafe2;
    border-bottom: 2px solid #ece7f7;
    /* 不可这样提取(最明显的一点:no-repeat  39px center 都是用于背景图片的,但是图片并不在这里。另外应该还有其它原因) */
    /* background: white no-repeat 39px center; */
    font-size: 16px;
    line-height: 38px;
    font-family:"宋体";
    /* 测量宽度-空格宽度: 33 - 8 , ... 还是随便取 */
    word-spacing: 20px;

    /* 添加padding后会增大元素,所以添加下面的语句 */
    /* 但这样会导致div的高度变得不确定,从而无法通过设置行高等于height的方法来实现文本垂直居中 */
    /* 另一种解决办法:根据padding重新计算元素尺寸,并明确给出固定值 */
    box-sizing: border-box;
    padding: 11px 4px 13px 105px;
    /*padding-left: 105px;*/
}

#xinfeng{
    height: 98px;
    background: white url("img/xinfeng.png") no-repeat 39px 34px;
    /* 语法错误 */
    /*background-image: url("img/xinfeng.png");*/
    
    /*无法通过设置行高等于height的方法来实现文本垂直居中 */
    /*line-height: 98px;*/

    /* 网上看到的一种让文本垂直居中的方法:使用下面的语句。原理未知,且兼容性不大好 */
    display: flex;
    align-items:center; /*实现垂直居中*/
}

单词换行:

word-break 属性 用来规定自动换行的处理方式,它不仅可以让浏览器在半角空格或连字符的后面换行。

  • 默认值为 normal 表示根据语言自身的换行规则,确定换行方式,中文将容器边界处的汉字换到下一行,西方文字则将整个单词换到下一行;
  • keep-all 表示不允许把单词截断,只能在半角空格或连字符处换行;
  • break-all 允许把单词截断,在单词内换行。

css 文本和div垂直居中方法汇总 - CSDN博客

第一,给元素加了padding之后,元素的宽度会变大(学会用检查工具)

第二,文字与文字之间的距离是由word-spacing加上空格的宽度来决定的,所以用word-spacing这个属性的时候一定要注意空格的宽度

标签样式初始化

css reset原则:但凡是浏览器默认的样式,都不要使用。

在chrome的开发工具中,选中一个元素,然后查看它的Styles,只要出现在"user agent stylesheet"下的样式都是浏览器默认样式。

重置各种标签:(将其变成纯文本形式和各种边距)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
h1 ~ h6
p
strong
mark
ul>li
ol>li
dl>dt+dd

a
img

重置body

书写原则:

  • 用到上面标签就清除所用标签的默认样式
  • 建议不要直接将所有标签全部加上
  • 不要将所有标签全部统一设置一致的reset,根据各自的特征来

选择器优先级

使用chrome检查元素时,如果发现某样式上存在删除线,则说明该样式被覆盖了。如果发现该样式前存在感叹号,则标明该样式写错了。

优先级:代码执行生效的顺序

​ 行间(内联)样式 > id选择器 > 类选择器 > 标签选择器

一个小技巧:将其转换为分值,对于一个复合的选择器,我们可以将其分值相加再来比较

行间(内联)样式  1000
id选择器    100
类选择器    10
标签选择器    1

CSS布局

布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。

  • CSS Flex布局,弹性布局

  • CSS Grid布局,网格布局

A Complete Guide to Grid | CSS-Tricks

CSS Grid 网格布局教程 - 阮一峰的网络日志

Flex 布局教程:语法篇 - 阮一峰的网络日志

CSS 定位详解 - 阮一峰的网络日志

分类:开发者手册 - 阮一峰的网络日志

剩余空间分配数:CSS Grid带来的新单位:分数单位fr

  • fr单位被用于在一系列长度值中分配剩余空间,如果多个已指定了多个部分,则剩下的空间根据各自的数字按比例分配。

fr是代表网格容器中可用空间的一等份,即1fr。如果是2fr那么就是把容器剩余的空间分成两等。

gr 网格数

您的鼓励是我最大的动力
alipay QR Code

Felix
作者
Felix
如无必要,勿增实体。

3

目录