✊总有人会成为第一，为什么不是你!

2021年07月09日

工作重点

1 工作重点事项 进度 已完成
2 早上(讲css样式) 已完成
- [x]

| | 3 | 下午(讲css外观属性+阴影+练习7个) | 已完成 |
- [x]

| | 4 | 晚上(完成练习) | 已完成 |
- [x]

|

遇到的问题和解决思路

遇到的问题

  1. 今天做练习，遇到一个标题，怎么也对不齐，很烦。


  2. 解决思路

  3. 放弃了，把每行文字对齐了，就剩标题了，苦恼，想用br或者一个一个p标签来用，但是过于费劲。

    2021.7.10 哈哈哈哈哈哈，终于都对齐了，是一个中文的：和英文: 的差异，还是得多注意细节


  4. 今日总结

    (1)CSS

    <!DOCTYPE html>














    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quisquam adipisci facilis ut
    omnis aspernatur, totam
    laudantium temporibus quaerat ad vel veniam quis sunt dolorum, quod neque impedit soluta voluptas libero.


    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quisquam adipisci facilis ut
    omnis aspernatur, totam
    laudantium temporibus quaerat ad vel veniam quis sunt dolorum, quod neque impedit soluta voluptas libero.




(2)CSS伪类选择器

<!DOCTYPE html>











(3)css外观属性

<!DOCTYPE html>










Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos maxime recusandae illum inventore dolorum
voluptatibus quidem doloremque unde odio, reiciendis temporibus et! Obcaecati quia tempore nulla reiciendis
fugiat aspernatur sit?



Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat distinctio velit magnam asperiores explicabo
qui, excepturi rem, tempora rerum molestias sint voluptate architecto nisi aliquam perspiciatis, ab dolores
aspernatur. Sequi!



Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat distinctio velit magnam asperiores explicabo
qui, excepturi rem, tempora rerum molestias sint voluptate architecto nisi aliquam perspiciatis, ab dolores
aspernatur. Sequi!













(4)css外观属性2

  1. <style>
  2.     a {
  3.         /* text-decoration: none 没有下划线 */
  4.         text-decoration: none;
  5.     }
  7.     p {
  8.         /* text-decoration: underline; 下划线 */
  9.         /* text-decoration: underline; */
  11.         /* text-decoration: line-through; 删除线 */
  12.         /* text-decoration: line-through; */
  15.         /* 
  16.             - **none：**无转换
  17.             - **capitalize：**将每个单词的第一个字母转换成大写
  18.             - **uppercase：**将每个单词转换成大写
  19.             - **lowercase：**将每个单词转换成小写 
  20.         */
  21.         text-transform: capitalize;
  23.         /* 
  24.             字符之间的间距 
  25.             即每个字母 、每个字之间的间距
  26.         */
  27.         /* letter-spacing: 10px; */
  29.         /* 
  30.             单词之间的间距 
  31.             中文之间是没有效果的
  32.          */
  33.         word-spacing: 2em;
  34.     }
  35. </style>
<div>
    <a href="">文本</a>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corrupti quasi expedita iure eaque fugit suscipit
        voluptas temporibus placeat nihil, adipisci eum cupiditate vel illo maxime sapiente quibusdam repudiandae,
        fugiat ratione.</p>
</div>

(5)阴影

<!DOCTYPE html>










Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur corporis quas cupiditate natus magni. Nobis
temporibus fugit quaerat reiciendis praesentium vel! Accusantium est in ea ut laboriosam, voluptas soluta
mollitia.



1 什么是CSS

简单来说，层叠样式表（Cascading Style Sheet）是一种专门用来控制界面外观风格的文档。主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。
CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式，并且样式还可以进行共享。

css使用方式总结

  • 定义在外部文件（外链样式）：开发中主要是通过这种形式定义样式。（推荐）
  • 在页面的头部定义（内联样式）：通过这种形式定义的样式只在本页面内生效。

  • 定义在特定的元素身上（行内样式）：这种形式多用于测试，可维护性较差。（不推荐）

    2. CSS字体样式属性

    2.1 font-size:字号大小

    font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。其中，相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。

    2.1.1 px

    px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的，一个像素等于电脑屏幕上的一个点 (是你屏幕分辨率的最小分割)。许多网页设计师在web文档使用像素单位以生产浏览器渲染的像素完美呈现的网站。

    2.1.2 em

    em是相对字体长度单位。如果用于font-size属性本身，则是相对于父元素的font-size。若用于其他属性（width,height），则是相对于本身元素的font-size。
    em单位有如下特点：

  • em的值并不是固定的;

  • em会继承父级元素的字体大小。
  • 我们知道任意浏览器的默认字体大小都是16px。所有未经调整的浏览器都符合: 1em=16px。

em是继承父元素的字体大小，可是当父元素字体大小改变时，又得重新计算了，这不怎么方便，还好rem解决了这个问题。

2.1.3 rem

rem是CSS3新增的一个相对单位（root em，根em），使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。
注意点:
rem 单位是由 html 元素的字体大小决定的。 此字体大小会被浏览器中字体大小的设置影响，除非显式重写一个具体单位。

font-family:字体

font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑，可以使用如下CSS样式代码：
p{ font-family:”微软雅黑”,”楷体_GB2312”;}
可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。

常用技巧：

  1. 现在网页中普遍使用16px、字体是微软雅黑。
  2. 尽量使用偶数的数字字号。ie6等老式浏览器支持奇数会有bug。
  3. 各种字体之间必须使用英文状态下的逗号隔开。
  4. 如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: “Times New Roman”;。
  5. 尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。

    font-weight:字体粗细

    字体加粗除了用 b 和 strong 标签之外，可以使用css 来实现，但是css 是没有语义的。
    font-weight属性用于定义字体的粗细，其可用属性值：normal、bold、bolder、lighter、100~900（100的整数倍）。
    属性值
值 描述
normal 默认值。定义标准的字符。
bold 定义粗体字符。
bolder 定义更粗的字符。
lighter 定义更细的字符。
100~900 定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。

小技巧： 数字 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 font-family;}
使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。

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

line-height：行间距

行高是指文本行基线间的垂直距离。

属性名 line-height
属性值 normal |数字 | 长度值 | 百分比
默认值 normal
描述 设置文本的行高
  • normal：默认值，行高由浏览器自动处理。
  • 数字：行高 = 数字 字体大小，例如，line-height: 2;font-size: 16px;，则行高等于：2 16px = 32px
  • 长度值：使用长度值设置行高，例如，line-height: 32px。
  • 百分比：基于当前字体大小的百分比。
  • line-height.png小技巧：
  • 基线（base line）并不是汉字文字的下端沿，而是英文字母“x”的下端沿。

  • 一般页面中的行高设置比字号大7~8像素左右就可以了, 比如当前使用14像素的字号，行高设为24像素左右合适。

    text-align：水平对齐方式

    | 属性名 | text-align | | —- | —- | | 属性值 | left | right | center | justify | | 默认值 | 如果文本方向为ltr，则默认值为left；如果文本方向为rtl，则默认值为right | | 描述 | 设置文本在水平方向上的对齐方式 |

  • left：内容左对齐。

  • center：内容居中对齐。（重点）
  • right：内容右对齐。
  • justify：内容两端对齐，但对于强制打断的行（被打断的这一行）及最后一行（包括仅有一行文本的情况，因为它既是第一行也是最后一行）不做处理。

text-indent:首行缩进

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

text-decoration：文本修饰

文本修饰

属性名 text-decoration
属性值 none | underline | overline | line-through
默认值 none
描述 对文本进行修饰
  • none：指定文字无装饰
  • underline：指定文字的装饰是下划线
  • overline：指定文字的装饰是上划线
  • line-through：指定文字的装饰是贯穿线

    text-transform：大小写转换

    文本的大小写
属性名 text-transform
属性值 capitalize | uppercase | lowercase | none
默认值 none
描述 控制文本的大小写
  • none：无转换
  • capitalize：将每个单词的第一个字母转换成大写
  • uppercase：将每个单词转换成大写
  • lowercase：将每个单词转换成小写

    letter-spacing：字符间距

    字符间距
属性名 letter-spacing
属性值 normal | 长度值
默认值 normal
描述 增加或减少字符间的空白（字符间距）
  • normal：默认间隔
  • 长度值：用长度值指定间隔。可以为负值。

    word-spacing（单词）

    单词间距
属性名 word-spacing
属性值 normal | length
默认值 normal
描述 增加或减少单词间的空白(即字间隔)
  • normal：默认间隔
  • length：用长度值指定间隔。可以为负值。
  • 1498467502625.png

dd.png

CSS书写规范

标识符规范

【建议】小写

选择器规范

【建议】 选择器的嵌套层级应不大于 3 级，位置靠后的限定条件应尽可能精确。

属性规范

【强制】 属性定义必须另起一行。
【强制】 属性定义后必须以分号结尾。

还有一个规范

先写能发生变化的样式，后写不发生变化的，这样浏览器会减速加载和运行速度。