青训营笔记

这是我参与「第五届青训营」伴学笔记创作活动的第 2 天

重点内容

CSS是什么

CSS如何工作

样式属性

笔记部分

CSS(Cascading Style Sheets)是用来定义页面元素的样式，其中包含：

设置字体和颜色

设置位置和大小

添加动画效果

基础代码

  h1{
  color:white:
  font-size:14px:
     }

h1代表的是选择器seletor,在此处代表的是要给页面所有的h1标签定义样式

color代表的是选择器property，是给予一种属性

white代表的是属性值value

font-size:14px代表的是声明declaration

在页面中使用CSS

外链是所写CSS定义的样式单独放在一个文件里，运用link标签来将其引入到页面里

嵌入是将CSS代码直接嵌入到<style>标签里

内联是将标签的样式直接写入到<style>属性里，好处在于不需要写选择器

CSS的工作原理

选择器Selector

需要找到页面中的元素，才能够给它们设置样式可以通过多种方式来选择元素：

1.按照标签名、类名或id

2.按照属性

3.按照DOM树中的位置

通配选择器

  <style>
  *{
    color:red;
    font-size:20px:
   }
   </style>

引用*会使得所有的标签元素都会被定义样式

标签选择器

 h1{
 color:white:
 font-size:14px:
    }

将所选择的标签元素定义样式

id选择器

 <style>
    
 #logo {
         font-size: 60px;
         font-weight: 200;
        }
  </style>

自定义名称的前缀是#，需注意其中的id必须是整个页面里的一对一的关系

类选择器

 <h2>Todo List</h2>
 <ul>
  <li class="done">Learn HTML</li>
  <li class="done">Learn CSS</li>
  <li>Learn JavaScript</li>
 </ul>
 <style>
 .done {
    color: gray;
    text-decoration: line-through;
       }
 </style>

使用自定义的名称，以 . 号作为前缀，然后再通过HTML标签的class属性调用类选择器

以标签的class属性作为样式应用的依据

伪类选择器

               a:visited{
			color:#666666;
			font-size: 13px;
			text-decoration: none;
		}
		a:hover,a:active{
			color:#ff7300;
			text-decoration: underline;
		}
		p:hover{
			color:red;
		}
		p:active{
			color:blue;
		}

根据不同的状态显示不同的样式，一般多用于标签 四种状态：

1.link 未访问的链接

2.visited 已访问的链接

3.hover 鼠标悬浮到连接上，即移动在连接上

4.active 选定的链接，被激活

注：普通的标签也可以使用伪类选择器

组合

颜色

取值有四种方法：

颜色名称：使用英文单词
16进制的RGB值：#RRGGBB（特定情况下可以缩写）注：不分大小写

#000000--->#000 黑色 
#FF0000--->#F00 红色 
#00FF00--->#0F0 绿色 
#0000FF--->#00F 蓝色 
#CCCCCC--->#CCC 灰色 
#FF7300--->无法简写

rgb函数：rgb(red,green,blue) 每种颜色的取值范围，[0,255]
rgba函数：rbga(red,green,blue,alpha) 可以设置透明度，alpha取值范围：[0,1] 0表示完全透明 1表示完全不透明

字体

属性	含义
font-size	大小、尺寸
font-weight	粗细
font-family	字体
font-style	样式
font	简写

个人总结

经过此课程的学习后，我对CSS有了更加深刻的理解，这对我的前端的学习有着相当有利的进步，因此我会付出更加的辛勤与汗水去面对接下来的课程。

走进前端技术栈-CSS | 青训营笔记

青训营笔记

重点内容

笔记部分

个人总结