百度前端实战训练营--CSS基础

Day3：CSS基础

详细介绍，可查看网站web 入门 - 学习 Web 开发 | MDN (mozilla.org)

在线编辑器：JS Bin - Collaborative JavaScript Debugging

CSS简介：

基本概念：层叠样式表 — 也就是CSS— 是你在HTML之后应该学习的第二门技术。HTML 用于定义内容的结构和语义，CSS 用于设计风格和布局。比如，您可以使用 CSS 来更改内容的字体、颜色、大小、间距，将内容分为多列，或者添加动画及其他的装饰效果。

CSS的引用：

1. • 外部样式表

HTML中的代码

  
  
  


  
hello world!

CSS中的代码

p {
  color:brown;
}

效果图

2. • 内部样式表

HTML中的代码

  
  
  


  
hello world!

效果图

3.标签中的style

HTML中的代码

  
  


  
hello world!
  
hello world

效果图

CSS的结构

CSS选择器

1. 标签、类和ID选择器

HTML中的代码

  
  
  


  
段落A
  
段落B
  
段落C
  
  
段落D
  
  
优先级测试
  
优先级测试
  

CSS中的代码

p {
  color:blue;
}
.paragraph {
  color:red;
}
.extra-para {
  font-size:30px;
}
#para {
  color:green;
}

效果图：

注：根据效果，可以判定优先级：ID>类>标签

2. 标签属性选择器

HTML中的代码

CSS中的代码

img[src] {
  width:700px;
  height:300px;
}

效果图

3. 伪类与伪元素

HTML中的代码

  
  
  点我跳转

CSS中的代码

a:hover {
  color:red;
}

效果图（点击前、点击后）

4. 关系选择器

HTML中的代码

    Span 1.
      Span 2.
    
  
  
  Span 3.

CSS中的代码

span {
  background-color:red;
}

div span {
  background-color:DodgerBlue;
}

效果图

注：这里也可以看出选择器优先级，后代（关系）>标签

实战中的问题：经常使用的类选择器，会由于类名而导致覆盖，为保证可读性如何选择合适的类名？

1. BEM命名规范

HTML中的代码

CSS中的代码（上述代码中的第二种方式的后代（关系）选择器）

.article .button-primary {
  
}

CSS样式

HTML中的代码

  
  
  

 
case 1：文本样式
  
this is text
case 2:处理溢出文本
  
我要溢出啦啦啦啦
  


  
case 3:简单动画
  
动画
  
case 3.1：旋转
  
旋转
  
case 4：布局元素
  
box
  
case 5：border属性的其他用法 ->绘制圆
  

  
case 6：实现导航栏

  
主页
  
课程
  
其他

  
case 7：loading动画
  
 

CSS中的代码

p {
  /* 辅助框线样式 start*/
  width:200px;
  height:50px;
  border:1px solid #a8a8a8;
  /* 辅助框线样式 end */
  
  /* 字体居中center，左对齐LEFT，右对齐RIGHT */
  text-align:center;
  /* 设置行间距 */
  line-height:50px;
  /* 字母间距 */
  letter-spacing:4px;
  /* 单词间距 */
  word-spacing:2px;
  /* 设置文字颜色 */
  color: red;
  font-size:20px;
  /* 无衬线字体，即笔画结尾是平滑的字体 */
  font-family:serif;  
}

.ellipse {
  width:100px;
  
  /* 解决溢出问题 */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.trans {
  width:100px;
  height:100px;
  background:red;
}

.trans {
  width:100px;
  height:100px;
  background:red;
  transition:width 2s;
  /* 增加阴影使画面立体：X轴偏移量，Y轴偏移量，模糊半径，扩散半径和颜色 */
  box-shadow:10px 10px 5px #888888;
}

.trans:hover {
  width:300px;
}

.rotate {
  width:200px;
  height:100px;
  background-color:yellow;
  transform:rotate(7deg);
}

.box {
  width:100px;
  height:100px;
  
  /* 框 */
  /* border:5px solid green; */
  /* border-bottom:3px dotted #ff0000; */
  
  /* 圆角框 */
  /* border:5px solid green; */
  /* border-radius:10px; */
  
  /* 框与文字的距离 */
  border:5px solid green;
  
  /* padding:25px; */
  /* padding:30px 50px; */
  /* padding:10px 20px 30px 40px; */
  
  /* 框与页面的距离 */
  /* margin:25px; */
  /* margin:30px 50px; */
  /* margin:10px 20px 30px 50px; */
}

.circle{
  width:100px;
  height:100px;
  border:2px solid green;
  /* border-radius:40px; */
  border-radius:50%;
}


ul {
  /* 设置列表元素的 marker */
  list-style-type:none;
  display:flex;
}

li a {
  /* 用于设置文本的修饰线外观的 */
  text-decoration:none;
  margin:10px;
}


.loading {
  width:35px;
  height:35px;
  border:5px solid rgba(189,189,0.25);
  border-left-color:rgba(3,155,229,1);
  border-top-color:rgba(3,155,229,1);
  border-radius:50%;
  animation:rotate 500ms infinite linear;
}
/* 通过在动画序列中定义关键帧的样式来控制CSS动画序列中的 */
@keyframes rotate {
  from {
    transform:rotate(0)
  }
  to {
    transform:rotate(1turn)
  }
}

效果图：

注：case3鼠标悬停时会变长，case7可以实现旋转

CSS盒模型

下节课课前预习