2019-07-15文本样式与盒子模型

开头的话:自我反思,发现当初学前端时觉得它超级简单,所以粗心大意,基础薄弱,现马上就要秋招了,重新巩固前端内容,祝自己秋招顺利。
在css里,存在样式继承,但不是所有的样式后代都能继承。

前面说到,学习css就是学习选择器和样式。选择器前面已经学过了,虽然很多,但常用的也就那么几个。下面,我们学习css的样式

不能被继承的样式:

所有与背景(background)相关的样式
边框相关的样式
定位相关的样式

文本标签及样式

  • em和strong:
    可以一起使用也可以分开使用。
    默认样式:em斜体,strong加粗。
    语义:强调
    em标签用于表示一段内容中的着重点(偏向于语气上面的强调)
    strong标签表示一个1内容的重要性(偏向于内容的重要性),比em强烈。
  • i标签和b标签:
    默认样式:i斜体,b加粗。
    无语义
    h5规范中,规定,对于不需要着重的内容,只是单纯想加粗或者斜体的,可以使用这两个标签。
    i标签现在多用来放矢量图icon
  • small标签:
    标签中的内容会比父元素中的内容要小一些。
    语义:细则一类的内容,比如合同中的小字,网站的版权声明。
  • cite标签
    语义:对某内容的引用或参考。例如,戏剧、文章或图书的标题,歌曲、电影、照片或雕塑的名称等。
    网页中所有使用书名号的内容都可以使用cite标签。
    默认样式:斜体
    <p><cite>《七龙珠》</cite>讲的是召唤神龙的故事</p>
  • q标签
    内联元素
    语义:表示一个短的引用,或者行内应用。例如引用名人名言。
    默认样式:加引号(通过before和after选择器设置的)
    属性:
    • cite:表示引用的地址
  • blockquote标签:
    块元素
    默认样式:独占一行
    语义:长引用,块级引用。例如知乎里面的文章。
    属性:
    • cite:表示引用的地址
  • sub和sup标签
    语义:sub下标,sup上标。
    <div>赵薇<sup><a href="#">[1]</a></sup></div>
  • del标签
    语义:表示删除的内容
    默认样式:删除线
    用于电商网站中的原价
  • ins标签
    语义:表示插入的内容
    默认样式:下划线
    <p>今天,我们的老师真<ins>漂亮</ins></p>
  • pre标签
    默认样式:开发者写的那种格式
    pre是一个预格式标签,会将代码中的格式保存,不会忽略多个空格。
  • code标签:
    语义:代码块
    默认样式:无

我们一般结合code和pre标签,来表示一段代码

    <pre>
      <code>
        window.onload = function(){
          console.log("哈哈哈");
        }
      </code>
    </pre>

长度单位:px,百分比,em

  • px:像素
  • 百分比:百分比是相对于父元素来说的。例如,父元素16px,子元素100%就是16px,200%就是32px;
  • em:em和百分比类似,相对于父元素来说,1em就相当于100%,2em相当于200%。常用于设置字体大小。

颜色单位:英文单词/十六进制/rgb/ rgba

在css可以直接使用颜色的单词表示不同的颜色
也可以使用RGB值来表示不同的颜色
十六进制

字体设置

  • font-family
    中文 SimSun(宋体) SimHei(黑体) Microsoft YaHei(微软雅黑) STKaiti(华文楷体)
    英文 Arial Georgia Helvetica sans-Serif(系统默认的)
  • 字体颜色 color
    英文单词/十六进制/rgb/ rgba
  • 行高 line-height 可用于设置文字的垂直居中。 上高 + 字体大小 + 下高
    测量 上面文字的顶端 到 下行文字的顶端
  • 文本对齐方式 text-align 默认为左边对齐
  • 首行缩进:text-indent
    em代表一个字符 / 具体数值
  • 文字着重
    font-weight
    即加粗
    normol / bold / bolder100~900
  • 文字倾斜
    font-style
    normol / italic /oblique
  • 文本修饰
    text-decoration
    none / underline / overline / line-through
  • 字母间距
    letter-spacing
    具体的数值
  • 单词间距
    word-spacing
    单词间距(以空格为解析单位)
  • 文本居中
    text-align:center
  • 元素居中
    margin:0px auto;
    margin:上下的值 左右的值
    auto 代表自动
  • 文本垂直居中
    1.div{
    height:100px;
    font:20xp/100px "字体格式";
    }
    字体格式必须设置,否则不起作用。
    2.height:80px;
    line-height:80px;
  • 文字缩进
    text-indent

盒子模型(Box Model)

css在处理网页时,它 认为每一个元素都包含在一个不可见的盒子里。
盒子模型方便我们布局。每一个元素都可以看作是一个盒子。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容