了解CSS|青训营笔记

Adoretheall
73 阅读2分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天，今天的课程是了解CSS。

什么是CSS：

CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称. 有时我们也会称之为 CSS 样式表或级联样式表。 CSS 是也是一种标记语言CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、 边距等）以及版面的布局和外观显示样式。CSS 让我们的网页更加丰富多彩，布局更加灵活自如。简单理解：CSS 可以美化 HTML , 让 HTML 更漂亮， 让页面布局更简单。

CSS最基础的代码：

h1{                  //h1:选择器seleclor(选中元素，定义样式）
    color:white;     //color:选择器property    white:属性值（value)
    font-size:14px;  //声明Declaration
  }

在页面中使用CSS：

<!--外链-->
<link rel="stylesheet" href="/assets/style.css">

<!--嵌入-->
</style>
    li { margin: 0; list-style:none;}
    p { marign: lem=0;}
</style>
    
<!--内联-->
<p style="marign:lem 0">Example Content</p>

推荐使用外联

CSS是如何工作的：

屏幕截图_20230116_112733.png

CSS流程之选择器组、文本渲染：

  1. 选择器（seleclor):找出页面中的元素，以便给他们设置样式。可以使用很多种方法选择样式。
  • 按照标签名、类名、id
  • 按照属性
  • 按照DOM树中的位置
  1. 通配选择器：在 CSS 中，一个星号 (*) 就是一个通配选择器。它可以匹配任意类型的 HTML 元素。在配合其他简单选择器的时候，省略掉通配选择器会有同样的效果。比如，*.warning 和.warning 的效果完全相同。屏幕截图_20230116_112935.png
  2. 标签选择器：标签选择器主要针对的是页面中某个标签中的样式设置，它的作用范围是这个页面内所有写在该标签内的内容，标签选择器可以定义多个标签的样式。

屏幕截图_20230116_112949.png 4.ID选择器：ID选择器也是定义在style标签内，它使用"#"作前缀，标识名照样是自定义的。然后括号内输入要修改样式的属性和属性值。调用ID选择器的样式需要使用标签内的ID方法。

屏幕截图_20230116_112956.png 5.类选择器：类选择器同样写于style标签内，但类选择器在定义的时候需要 "." 来做前缀，类名是自定义的，然后在括号内定义属性和属性值。它不是直接作用在该页面中，而是需要使用class方法去自定义要作用的标签。

屏幕截图_20230116_113016.png 6.属性选择器：属性选择器通过已经存在的属性名或属性值匹配元素。

屏幕截图_20230116_113031.png 7.font-size:

  • 关键字：small、medium、large
  • 长度：px、em
  • 百分数：相对于父元素字体大小

调试CSS：

  • 右击点击界面，选择检查
  • 使用快捷键：ctrl+shift+I(windows)或者cmd+opt+I(Mac)
avatar
文章
阅读
粉丝