DAY2 CSS

最新推荐文章于 2024-09-11 20:31:47 发布

来陪可莉炸鱼吧

最新推荐文章于 2024-09-11 20:31:47 发布

阅读量65

点赞数

分类专栏：前端文章标签： css 前端

本文链接：https://blog.csdn.net/Sheldon_2020/article/details/128570426

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

CSS的引用

外部样式表

//在head中插入link标签
<link rel="style-sheet" href="css/cssImport">

内部样式表
```
//在style中定义
p {
color:red;
}
```
css标签中的style

<p style="color:red">1</p>

CSS的结构

CSS选择器

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <!-- 简单选择器 -->
  <p>段落A</p>
  <p class="paragraph">段落B</p>
  <!-- 同时使用多个类 -->
  <p class="paragraph extra-para">段落C</p>
  <p id="para">段落D</p>
  
 <!--  优先级：ID>类>类型 -->
  <p id="para" class="paragraph">优先级测试</p>
  
  <!-- 属性选择器 -->
  <img src="https://t7.baidu.com/it/u=2851687453,2321283050&fm=193&f=GIF" alt="">
  <!-- 伪类选择器 -->
  <a href="">点我</a>
  
 <!--  后代选择器 -->
  <div>
    <span>span1.
      <span>span2.</span>
    </span>
  </div>
  <span>span3.</span>
  </body>
</html>

<!-- BEM类选择器命名 -->
<div class="article">
  <button class="article__button--primary"></button>
  <button class="article__button--success"></button>
</div>
<!-- 后代选择器命名 -->
<div class="article">
  <button class="button--primary">1</button>
  <button class="button--success">2</button>
</div>

/* 类型选择器 */
p {
  color: blue;
}
/* 类选择器 */
.paragraph{
  color: brown;
}
.extra-para {
  font-size: 30px;
}
/* ID选择器 */
#para {
  color:green;
}
/* 属性选择器：指定src属性 */
img[src]{
  width:100px;
}
/* 伪类选择器 */
a:hover{
  color:red;
}
span {
  background-color: white;
}
div span {
  background-color: Dodgerblue;
}
.article .button--primary {
  
}

CSS样例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<!-- case1:文本样式 -->
  <p>this is text</p>
  <!-- case2: 处理溢出文本 -->
  <p class="ellipse">我要溢出啦啦啦啦啦啦啦</p>
</body>
  <!-- case3:简单动画 -->
  <div class="trans">动画</div>
  <!-- case3.1: 旋转 -->
  <div class="rotate">旋转</div>
  <!-- case4: 布局元素 -->
  <div class="box">box</div>
  <!-- case5:利用border属性绘制圆 -->
  <div class="circle"></div>
  <!-- case6: 实现导航栏 -->
  <ul>
    <li><a href="xx">主页</a></li>
    <li><a href="xx">课程</a></li>
    <li><a href="xx">其他</a></li>
  </ul>
  <!-- case7:loading动画 -->
  <div class="loading"></div>
</html>

p {
  /* 辅助框线样式start */
  width: 200px;
  height: 50px;
  border: 1px solid #a8a8a8;
   /* 辅助框线样式end */
    text-align: center;
   /* 设置行间距 */
  line-height: 50px;
  /* 字母间距 */
  letter-spacing: 4px;
  /* 单词间距 */
  word-spacing: 10px;
  /* 设置文字颜色 */
  color:red;
  font-size: 20px;
  /* 无衬线字体 */
  font-family: serif;
}
.ellipse{
  width: 100px;
  /* 和normal一样，连续的空白符被合并，但文本内的换行符不会生效 */
  white-space:nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.trans{
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
  /* x轴、Y轴偏移量，模糊半径，扩散半径和颜色 */
  box-shadow: 30px 20px 10px #888888;
}
.trans:hover{
  width:300px;
}
.rotate{
  width: 300px;
  height: 100px;
  background: yellow;
  transform: rotate(7deg) ;
}
.box{
  width:100px;
  height: 100px;
  border: 5px solid green;
  border-bottom: 3px dotted #ff0000;
  border-radius: 20px;
  
  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: 5px solid green;
  border-radius: 50%;
}
ul{
  /* 设置列表元素的marker */
  list-style-type: none;
  display:flex;
}
.loading{
  width:35px;
  height: 35px;
  border: 5px solid rgba(189,189,189,0.25);
  border-left-color: rgba(3,155,229,1);
  border-radius:50%;
  animation:rotate 500ms infinite linear;
}
@keyframes rotate {
  from{
    transform:rotate(0)
  }
  to{
    transform:rotate(1turn)
  }
}