1.3 CSS基础

CSS结构

p{------------选择器

color:red；------声明 color为属性 red为属性的值

}

CSS选择器

1. 类型、类和ID选择器

2. 标签属性选择器

3. 伪类与伪元素

4. 关系选择器

HTML

< ! --简单选择器-->

<p>我是段落A</p>

<p class="paragraph">我是段落B</p>

<p class="paragraph extra-para">我是段落C</p>

<p id="para">我是段落D</ p>

<p id="para" class="paragraph">优先级测试</p>

CCS

font-size: 30px;-----------字体大小

img[src]{-------------图片选择

width: 100px;------------------------------宽度

}

ID选择器>类选择器>标签选择器

伪类选择器

<!--只会在鼠标指针悬浮到一个元素上的时候选择这个元素

<a href="">点我跳转</ a>

a ; hover {

color: red;

}

效果图

<!--后代选择器-->

<div>

<span>Span 1.

<span>Span 2.</ span>

</ span>

</div>

<span>Span 3.</ span>

span {

background-color: white ;

div span {

background-color: DodgerBlue;

}

span {

background-color: white;

}

效果图

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>

• 效果图展示

CSSY 样式设计

p{

/*辅助框线样式，start * /

width: 200px;

height: 50px;

border: 1px solid #a8a8a8;

/*辅助框线样式,end * /

text-align: center;/*设置行间距*/----------------center/LEFT/RIGHT

line-height: 50px;/*字母间距*/

letter-spacing: 4px;/*单词间距*/

word-spacing: 20px;/*设置文字颜色*/

color : red;

font-size: 20px ;

/*无衬线字体，即笔画结尾是平滑的字体。 */

font-family: serif;

}

.ellipse {

width: 100px;

/*和normal一样，连续的空白符会被合并。但文本内的不会

white-space: nowrap;

overflow: hidden -------超出部分隐藏

text-overflow: eilipsis;-------超出部分转换成省略号

}

• 动画设置

.trans {

width: 100px;

height: 100px；

background: red;

transition: width 2s;------动画时间 2S

*×轴偏移量、Y轴偏移量、模糊半径、扩散半径和颜色。

box-shadow: 30px 40px 5px #888888;---------------阴影面积

.trans : hover {

width: 300px;

}

.rotate {

width: 200px;

height: 100px;

background-color: yellow;

transform: rotate (7deg);-----------旋转7度

}

边框

.box

width: 100px;

height: 100px ;

/* border: 5px solid green ; */

/ * border-bottom: 3px dotted #ff0000; * /

border: 5px solid green;

border-radius: 20px;----------------------------------------弧角设置 弧度半径

/* border: 5px solid green; */

padding: 25px; ------------使文字远离边框相应距离

padding: 30px 50px ; */

/ * padding: 10px 20px 30px 50px; */

/*margin: 25px; */

/* margin: 30px 50px; */

/ *margin: 10px 20px 30px 50px; * /

}

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,189 ,0.25);

border-left-color: rgba(3,i55,229 ,1);

border-top-color: rgba(3 ,i55,229 ,1);

border-radius: 50%;

animation: rotate 500ms infinite linear;

)

*通过在动画序列中定义关键帧的样式来控制CCS动画序列

@keyframes rotate {

from {

transform: rotate(0))

to {

transform: rotate(lturn)

}

}

• 效果图