百度前端实战训练营学习心得——Day3 CSS基础

HTML中引入CSS的方法：

1. 外部样式表：(推荐使用)

用link标签引入，再写在css文件里

在CSS里写     

 

2. 内部样式表：

 

3. 标签中的style

CSS格式

 

选择器

1. 标签选择器

在CSS里直接用标签设置样式（缺点：所有<p>标签的都会改变）

2. 类选择器 class

（1）在CSS里就可以单独直接设置它的布局 .paragraph

（2）class不是只能指定一个类名，它可以指定多个类名

在CSS里这两个类同时作用于“我是段落C“——这个文本既是棕色（brown）又是30px的字体大小

3. Id选择器

CSS里：（注意这里是要写#）

4. 属性选择器

CSS里

5. 伪类选择器

CSS里（hover：指当鼠标放在当前链接上时）

样式变化：

鼠标无触碰时           鼠标放在当前链接上时 

6. 后代选择器

CSS里：（只改变div里所有的span的样式）

7. 注意

（1）优先级：id选择器 > 类选择器 > 标签选择器

（2）可以在多处使用相同的class，但id只能是唯一的值

类命名

1. BEM命名法

2. （无名）

这种写法定位某一个的样式时：（CSS中）

CSS样式

1. 文本样式

（1）居中对齐 、 右对齐 、 左对齐

        

（2）行间距设置

（3）字母间距  、  单词间距

        

（4）文字颜色

 

（5）字体大小

（6）字体设置

 

2. 溢出处理（溢出部分变省略号）

原来：             溢出处理后：

 

3. 动画效果

transition：过渡效果

 

变化过程：

      

模糊度：

    

 

4. 旋转

旋转7度

transform：变换效果   （transition：过渡效果）

 

5. 边框

 

6. 圆形边框

结果：

 

7. 实现导航栏

原来：        执行后：

 

8. Loading动画实现

         （转动效果）

CSS盒模型

例如：