CSS基础


CSS基础

CSS基础概念速览

定义及样式引用方式

What and Why

  • CSS,即层叠样式表,定义了如何展现HTML元素的样式
  • 优点:
    • HTML负责结构,CSS负责外观,职责分离更清晰
    • 系统更新和维护更轻松
    • 极大的提高工作效率,一个样式表管理多个页面

CSS样式的引用方式

  • 外部引用样式表(link)
  • 嵌入式样式表(Embed)
  • 行内样式表(inline)
  • import方式

实际工作中,不允许使用行内样式表、import引用方式


规则和选择符

CSS规则

定义:是一个样式定义的指令集,可包含多个样式定义

每条规则的最后一条样式定义可以不以分号结尾,但实际工作中,让每条样式定义(声明)都以分号结尾,是个好习惯

CSS选择符

  • 定义:用于从HTML中选择元素
  • 分类:
    • 全体选择符:*{ color:red; }
    • 元素选择符:div{ color:red; }
    • 类选择符:.title{ color:red; }
    • id选择符:#submit{ color:red; }
    • 伪类选择符::hover{ color:red; }
    • 后代选择符:.list h3{ color:red; }
    • 组合选择符:div.author{ color:red; }
    • 分组选择符:div,p,span{ color:red; }

具体性和层叠性

CSS的具体性

  • 当一个元素同时符合多条规则时,相对具体的规则会覆盖相对不具体的规则。
  • 具体性比较:
    • 全体选择符 < 元素选择符 < 类选择符 < ID选择符 < 内联样式
  • 另外:
    • 拥有再多的类选择符,也不可能比得上拥有ID选择符更具体
    • 。。。。

CSS的层叠性

  • 具体性相同的两条规则,按其出现的顺序依次覆盖
  • 层叠性比较:
    • 浏览器默认样式 < 外部样式表 < 嵌入样式表 < 内联样式表
  • 另外,在每个样式表的内部,同样遵守先后顺序的原则,总而言之,越靠近元素的规则,越是胜利者。

度量单位和颜色

CSS的度量单位

  • 常见的度量单位:px、em、%
    • px是像素Pixel的缩写,是相对长度单位,相对于显示器分辨率而言的,也是我们最常用的度量单位;
    • em相对当前容器内的文本字体尺寸,em还具有继承父级容器的字体大小的特性,所以值不固定,相对较难控制,一般西方站点中使用较多。

CSS的颜色

  • 常见的颜色表示法:英文名称、16进制法、rgb法:
    • 英文名称法:red、pink、yellow …
    • 16进制法:形如#3399cc的16进制,可以简写为#39c;
    • rgb法:形如rgb(0,0,255),分别代表红绿蓝3种成分的值

盒子模型

  • CSS中,每个HTML元素生成一个矩形框,它描述了该元素在页面布局中所占的空间大小,并会影响到其他元素的大小和位置。
  • 盒子模型由内而外包含以下内容:
    • 内容、填充(padding)、边框(border)、边界(margin)


CSS属性详解

文本样式

text-indent

  • 作用:文本的首行缩进
  • 取值:0、数值、百分比
  • 理论上,text-indent可以应用于任何块级元素
p{ text-indent:30px; }

text-align

  • 作用:文本的对齐方式
  • 取值:left、center、right、justify
  • 学习了这个标签,你应该可以放心的抛弃center元素了
div{ text-align:center; }

white-space

  • 作用:处理文本或单词间的空白
  • 取值:
    • pre:保留空白
    • nowrap:文本不换行
    • normal:忽略空白
  • 经常可以看到很多人在td标签中使用nowrap属性,学习了这个标签,你可以放心的抛弃这种写法了
td{ white-space:nowrap; }

line-height

  • 作用:设置行间距,即行高
  • 取值:数值、%、normal
  • line-height不可以设置为负值。
  • 使用px为单位时,一般24px~25px是常用的值。
p.content{ line-height:24px; }

vertical-align

  • 作用:设置文本的垂直对齐方式
  • 取值:%、baseline、super、bottom、sub、top、text-top、text-bottom、middle
p.content{ vertical-align:middle; }

word-spacing

  • 作用:设置文字间距
  • 取值:数值、normal
  • 这里的文字的含义:以空格隔开的字符串(英文效果显著)
  • 实际效果其实就是增大一段文本中空白字符(空格)的宽度(整段汉字可能会没有效果,因为汉语段落一般都没有空格)
p.content{ word-spacing:22px; }

letter-spacing

  • 作用:设置字母间距
  • 取值:数值、normal
  • 这里的字母的含义:英文是字母,中文是单个的字
  • 实际效果:在每个字母或汉字中间插入一段空白距离
p.content{ letter-spacing:22px; }

text-decoration

  • 作用:设置文本效果
  • 取值:none、underline、overline、line-through、blink
p.content{ text-decoration:underline; }

font-family

  • 作用:设置字体
  • 取值:字体名称
p.content{ font-family:宋体; }

font-size

  • 作用:设置字体大小
  • 取值:数值、%、xx-small、x-small、small、medium、large、x-large、xx-large、smaller、larger
  • 一般都是直接赋值的方式,常用12px、14px大小;
  • 相对大小的字体,慎用。
p.content{ font-size:12px; }

font-weight

  • 作用:设置字体粗细
  • 取值:normal、bold、bolder、lighter、数值
  • 数值很少使用;
p.content{ font-weight:bold; }

文本:color

  • 作用:设置字体颜色
  • 取值:颜色的英文单词、16进制法、rgb法
p.content{ color:#006699; }

盒子模型相关样式

width

  • 作用:设置元素的内容区域的宽度
  • 取值:数值、%、auto
  • 框模型的宽度和这里说到的width属性不是一回事:
  • 框模型宽度 = width + padding-left + padding-right + border-left + border-right 
div{ width:246px; }

height

  • 作用:设置元素的内容区域的高度
  • 取值:数值、auto
  • 框模型的高度和这里说到的height属性不是一回事:
  • 框模型高度 = height + padding-top + padding-bottom + border-top + border-bottom
div{ height:148px; }

margin

  • 作用:设置元素的外边界,边框之外的一段空白
  • 取值:数值、%、auto
  • margin不会影响元素盒子自身的大小,但会影响盒子与其他元素的布局样式
  • margin:10px 10px 10px 10px;(上、右、下、左)
  • margin:10px 10px;(上下、左右)
  • margin:10px;(全部)
  • margin-left、margin-right、margin-top、margin-bottom
div{ margin:20px; }

padding

  • 作用:设置元素的补白,内容到边框的一段空白
  • 取值:数值、%
  • padding:10px 10px 10px 10px;(上、右、下、左)
  • padding:10px 10px;(上下、左右)
  • padding:10px;(全部)
  • padding-left、padding-top、padding-right、padding-bottom
div{ padding:10px; }

border-style

  • 作用:设置元素的边框样式
  • 取值:none、dotted、dashed、solid、double、groove、ridge、inset、outset
  • 背景颜色结束于边框的外边界
div{ border-style:solid; }

border-width

  • 作用:设置元素的边框宽度
  • 取值:数值、thin、medium、thick
  • border-top-width、border-bottom-width、border-left-width、border-right-width
div{ border-width:1px; }

border-color

  • 作用:设置元素的边框颜色
  • 取值:颜色名称、16进制法、rgb法
  • border-top-color、border-bottom-color、border-left-color、border-right-color
div{ border-color:#ccc; }

浮动

  • 浮动,是CSS布局中的一个重要的概念:
    • 在容器内,浮动的元素会向左或向右移动,直到碰到另一个浮动元素,或者碰到容器的边框
    • 如果一排N个高度不同的浮动元素,当一行排不满的时候而换行的时候,可能会因为高度问题而错位

float

  • 作用:设置浮动,页面排版的主要属性之一
  • 取值:left、right、none
  • 浮动元素会自动被设置成块级元素;
  • 设置了float:left属性的元素总是跟在另一个float:left的元素后面,或者就是新起一行
div.left{ float:left; }

clear

  • 作用:清除浮动,页面排版的主要属性之一
  • 取值:left、right、both、none

background-color

  • 作用:设置元素的背景色
  • 取值:颜色的英文单词、16进制法、rgb法
p.content{ background-color:#006699; }

background-image

  • 作用:设置元素的背景图片
  • 取值:形如url(../logo.png)
.logo
{ 
    background-image: url(../logo.png);
 }

background-repeat

  • 作用:设置元素的背景图片的平铺模式
  • 取值:no-repeat、repeat-x、repeat-y
.logo
{ 
    background-image: url(../logo.png);
    background-repeat:no-repeat;
 }

background-position

  • 作用:设置元素的背景图片的位置
  • 取值:数值、top、left、right、bottom、center
.logo
{ 
    background-image: url(../logo.png);
    background-position:left  top;
 }

排版与定位相关样式

list-style-type

  • 作用:设置列表项的样式
  • 取值:none、disc、circle、square、decimal、upper-alpha、lower-alpha、upper-roman、lower-roman
  • 有序列表和无序列表都可以使用
.list{ list-style-type:none; }

position

  • 作用:设置定位类型
  • 取值:relative、absolute、fixed、static、inherit
div.aside{ position:relative; }

top、left、right、bottom

  • 作用:设置元素与其包含块的边距的距离
  • 取值:数值、%、auto
div.tip{ 
    position:absolute; 
     top:20px; 
    left:10px;
}

overflow

  • 作用:设置内容溢出的处理方式
  • 取值:visible、hidden、scroll、auto、inherit
p.content{ overflow:hidden; }

z-index

  • 作用:设置元素的层叠顺序
  • 取值:数值、auto


文章作者: 韩思远
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 韩思远 !
评论
 上一篇
Hexo博客搭建和部署 Hexo博客搭建和部署
Hexo博客搭建和部署初探HexoHexo 是什么? Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。Hexo官网:https://hexo.
2019-06-01
下一篇 
Github开源之旅 Github开源之旅
Github开源之旅认识Git注册GitHub账户 熟悉GitHub和认识Github (1)实名注册 Github 账户、点亮个人头像、完善个人资料(2)能够在 Github 上搜索资料(你感兴趣的方面,python、java等等)(3)
2019-05-01
  目录