前端基础02 CSS

时间 2019-11-05

标签前端基础 css 栏目 CSS 繁體版

原文原文链接

CSS的几种引入方式

行内样式

行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。css

<p style="color: red">Hello world.</p>

内部样式

嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式以下：html

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            background-color: #2b99ff;
        }
    </style>
</head>

外部样式

外部样式就是将css写在一个单独的文件中，而后在页面进行引入便可。推荐使用此方式。前端

<link href="mystyle.css" rel="stylesheet" type="text/css"/>

CSS选择器

基本选择器

元素选择器
```
p {color: "red";}
```
ID选择器
```
#i1 {
background-color: red;
}
```
类选择器
```
.c1 {
font-size: 14px;
}
p.c1 {
color: red;
}
```
标签中的class属性若是有多个，要用空格分隔浏览器
通用选择器
```
* {
color: white;
}
```

组合选择器

后代选择器

/*li内部的a标签设置字体颜色*/
li a {
color: green;
}

儿子选择器

/*选择全部父级是 <div> 元素的 <p> 元素*/
div>p {
font-family: "Arial Black", arial-black, cursive;
}

毗邻选择器

/*选择全部紧接着<div>元素以后的<p>元素*/
div+p {
margin: 5px;
}

弟弟选择器

/*i1后面全部的兄弟p标签*/
#i1~p {
border: 2px solid royalblue;
}

属性选择器

/*用于选取带有指定属性的元素。*/
p[title] {
  color: red;
}
/*用于选取带有指定属性和值的元素。*/
p[title="213"] {
  color: green;
}

分组和嵌套

分组
当多个元素的样式相同的时候，咱们没有必要重复地为每一个元素都设置样式，咱们能够经过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。
例如：ide
```
div, p {
color: red;
}
```
嵌套
多种选择器能够混合起来使用，好比：.c1类内部全部p标签设置字体颜色为红色。
```
.c1 p {
color: red;
}
```

选择器的优先级

同等选择器，越靠近标签的优先级越高（就近原则）
性能

伪类选择器

/* 鼠标移动到连接上 */
a:hover {
  color: #FF00FF
} 

/*input输入框获取焦点时样式*/
input:focus {
  outline: none;
  background-color: #eee;
}

伪元素选择器

first-letter
经常使用的给首字母设置特殊样式：字体

p:first-letter {
  font-size: 48px;
  color: red;
}

beforecode

/*在每一个<p>元素以前插入内容*/
p:before {
  content:"*";
  color:red;
}

afterhtm

/*在每一个<p>元素以后插入内容*/
p:after {
  content:"[?]";
  color:blue;
}

before和after多用于清除浮动。blog

CSS属性相关

宽和高

width属性能够为元素设置宽度。

height属性能够为元素设置高度。

块级标签才能设置宽度，内联标签的宽度由内容来决定。

字体属性

文字字体、字体大小

body {
  font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
}
p {
  font-size: 14px;
}

若是设置成inherit表示继承父元素的字体大小值
字重（粗细）
font-weight用来设置字体的字重（粗细）。

值	描述
bold	粗体

文本颜色
颜色属性被用来设置文字的颜色。

颜色是经过CSS最常常的指定：

十六进制值 - 如: ＃FF0000
一个RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如: red

还有rgba(255,0,0,0.3)，第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间。

文字属性

文字对齐

text-align 属性规定元素中的文本的水平对齐方式。

值	描述
left	左边对齐默认值
right	右对齐
center	居中对齐

文字装饰
text-decoration 属性用来给文字添加特殊效果
经常使用的为去掉a标签默认的自划线：

a {
  text-decoration: none;
}

首行缩进
将段落的第一行缩进 32像素：

p {
  text-indent: 32px;
}

两倍于font-size的设置就是缩进两个字体

背景属性

http://www.javashuo.com/article/p-xnrtvfmf-g.html

边框

border-radius

用这个属性能实现圆角边框的效果。

将border-radius设置为长或高的一半便可获得一个圆形。

display属性

CSS盒子模型

margin: 用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，多用来调整标签和标签之间的距离，从视觉角度上达到相互隔开的目的。
padding: 用于控制内容与边框之间的距离；
Border(边框): 围绕在内边距和内容外的边框。
Content(内容): 盒子的内容，显示文本和图像。

margin外边距

.margin-test {
  margin-top:5px;
  margin-right:10px;
  margin-bottom:15px;
  margin-left:20px;
}

推荐使用简写：

.margin-test {
  margin: 5px 10px 15px 20px;
}

顺序：上右下左

常见居中：

.mycenter {
  margin: 0 auto;
}

padding内填充

示例：设置一个列表
效果：

<style>
    /*取消ul标签前面的标志*/
    ul {
        list-style-type: none;
    }
    /*把li标签转成行级标签*/
    li {
        display: inline;
    }
    /*把a标签下划线取消，右边框设置1px实线红色，padding上下设置0，左右设置15px*/
    li>a {
        text-decoration: none;
        border-right: 1px solid red;
        padding: 0 15px;
    }
    /*不显示最后一个li标签的右边框*/
    li.last>a {
        border-right: none;
    }
</style>

<ul>
    <li><a href="">大米商城</a></li>
    <li><a href="">小魅商城</a></li>
    <li><a href="">锤科商城</a></li>
    <li class="last"><a href="">华为商城</a></li>
</ul>

float

在 CSS 中，任何元素均可以浮动。

浮动元素会生成一个块级框，而不论它自己是何种元素。
关于浮动的两个特色：

浮动的框能够向左或向右移动，直到它的外边缘碰到包含框或另外一个浮动框的边框为止。
因为浮动框不在文档的普通流中，因此文档的普通流中的块框表现得就像浮动框不存在同样。

三种取值

left：向左浮动

right：向右浮动

none：默认值，不浮动

.c2 {
    float: left;
    height: 100px;
    width: 100px;
}

clear

clear属性规定元素的哪一侧不容许其余浮动元素。

值	描述
left	在左侧不容许浮动元素。
right	在右侧不容许浮动元素。
both	在左右两侧均不容许浮动元素。

clear属性只会对自身起做用，而不会影响其余元素。

举例：解决父标签塌陷，清除浮动

由于c1和c2都是浮动元素，因此撑不起父标签，此时利用伪元素添加一个元素，同事设置清除左侧浮动能够把父标签撑起来，这个伪元素自己不须要有高度

<div id="d1" class="clearfix">
    <div class="c1">c1</div>
    <div class="c2">c2</div>
</div>

.clearfix:after {
    content: "";
    clear: left;
    display: block;
}

overflow溢出属性

值	描述
visible	默认值。内容不会被修剪，会呈如今元素框以外。
hidden	内容会被修剪，而且其他内容是不可见的。
scroll	内容会被修剪，可是浏览器会显示滚动条以便查看其他的内容。
auto	若是内容被修剪，则浏览器会显示滚动条以便查看其他的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

圆形头像示例：

<style>
    .header-img {
        width: 120px;
        height: 120px;
        border: 2px solid silver;
        /*设置为原型*/
        border-radius: 100%;
        /*若是溢出则隐藏*/
        overflow: hidden;
    }
    .header-img>img {
                max-width: 100%;
    }
</style>

<div class="header-img">
    <img src="https://s4.51cto.com//oss/201901/03/d4ad6e4650cfe4f35e18a5c76d2af13f.jpg" alt="">
</div>

效果：

定位（position）

static --> 默认的
relative --> 相对定位(相对于原来的位置来讲)
absolute --> 绝对定位(相对于最近的一个被定位过的祖宗标签) (彻底脱离文档流)
fixed --> 固定在某个位置(返回顶部按钮)

左右上下
left right top bottom

示例：
返回顶部按钮样式示例

<div class="scrollTop">返回顶部</div>

<style>
    * {
        margin: 0;
    }
    .fixed-test {
        /*固定位置*/
        position: fixed;
        /*用右和下定位*/
        right: 20px;
        bottom: 20px;
        background-color: olivedrab;
    }
</style>

脱离文档流补充

脱离文档流的三种方式
float
absolute 绝对定位
fixed 固定定位

z-index

数值越大,越靠近你
只能做用于定位过的元素

示例：自定义的模态框

<div class="c1"></div>
<div class="c2"></div>

.c1 {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 999;
}

.c2 {
    height: 400px;
    width: 600px;
    position: fixed;
    background-color: white;
    top: 50%;
    left: 50%;
    margin-top: -200px;
    margin-left: -300px;
    z-index: 1000;
}

opacity 不透明度

取值0~1
和rgba()的区别:

opacity改变元素\子元素的透明度效果
rgba()只改变背景颜色的透明度效果