Web开发 | CSS 介绍 & 使用总结 (二)

2018-12-13  本文已影响0人  Leon_520

CSS介绍

CSS 指层叠样式表(Cascading Style Sheets), 样式定义如何显示 HTML 元素, 样式通常存储在样式表中, 解决内容与表现分离的问题, 外部样式表可以极大提高工作效率, 外部样式表通常存储在 CSS 文件中

HTML和CSS的编写准则

在编写HTML和CSS代码过程中，要遵守一个准则

因此，不要使用HTML元素的属性来给元素添加样式，比如body的bgcolor、img的width\height等

以下是不建议的写法

<body bgcolor="red">
<img src="图片地址" alt="" width="200px" height="200px">
</body>

建议写法:

<!--CSS样式表-->
@charset "UTF-8";
body {
    background-color: red;
}
img {
    width: 200px;
    height: 200px;
}
<!--导入-->
<link rel="stylesheet" href="CSS/page.css">
<!--使用-->
<body>
<img src="图片地址" alt="图片说明">
</body>

CSS样式表

内联样式（inline style）

将样式直接写在元素的style属性上

<div style="color: purple; background-color: red; font-size: 30px">内容文字</div>

文档样式表（document style sheet）

将样式写在head元素的style元素中

<head>
    <style type="text/css">
        div {
            color: red;
            background-color: azure;
        }
    </style>
</head>

外部样式表（external style sheet）

将样式写在单独的CSS文件中，然后在当前网页的head元素中用link元素引用

<head>
    <meta charset="UTF-8">
    <title>04.外部样式表</title>
    <link rel="stylesheet" href="CSS/div.css">
</head>

在CSS文件中使用@charset指定文件编码，一般都是UTF-8

<!--外部样式表-->
@charset "UTF-8";

div {
    color: aqua;
    background-color: purple;
    width: 1000px;
    height: 500px;
}

CSS 选择器

CSS选择器

按照一定的规则选出符合条件的元素，为之添加CSS样式

选择器的种类繁多，大概可以这么归类

通用选择器（universal selector）

所有的元素,一般用来给所有元素作一些通用性的设置
效率比较低，尽量不要使用

* {
        color: cyan;
        background-color: aliceblue;
        text-transform: capitalize;
}

元素选择器（type selectors）

或者叫做“标签选择器”

div {
    color: purple;
}

id选择器（id selectors）

一个HTML文档里面的id值是唯一的，不能重复

#span-style {
    color: white;
    background-color: black;
}

类选择器（class selectors）

一个元素可以有多个class值，每个class之间用空格隔开

.global_style {
    color: black;
    background-color: white;
    font-family: "PingFang SC";
    font-size: 20px;
    margin: 10px;
}

属性选择器（attribute selectors） - [attr]

找到标签中对应属性,则会进行修改

[attr~=val] 属性值包含单词one的元素（单词one与其他单词之间必须用空格隔开）
[attr|=val] 属性值恰好等于one 或者 以单词one开头且后面紧跟着连字符-的元素
[attr^=val] 属性值以单词one开头的元素 [attr$=val] 属性值以单词one结尾的元素
[attr*=val] 属性值包含单词one的元素

[title] {
    color: red;
}
[title = "one"] {
    color: blue;
}
[title ^= "name"]{
     color: yellow;
 }

后代选择器（descendant combinator）

后代选择器可以选择作为某元素后代的元素, div元素里面的span元素（包括直接、间接子元素）
元素之间使用 空格 间隔

div span {
    color: green;   
}
div p span{
    color: yellow;
}

子选择器（child combinators）

子元素选择器,只能选择作为某元素子元素的元素。

div>em{
    color: red;
}

相邻兄弟选择器（adjacent sibling combinator）

div元素后面紧挨着的p元素（且div、p元素必须是兄弟关系）

div+p {
    color: red;
}

全体兄弟选择器（general sibling combinator）

div元素后面的p元素（且div、p元素必须是兄弟关系）

div~p{
    color: red;
}

选择器组 - 交集选择器

同时符合2个条件的元素：div元素、class值有one

div.one {
    color: red;
}

选择器组 - 并集选择器

所有的div元素 + 所有class值有one的元素 + 所有title属性值等于test的元素

div, .one, [title = "test"] {
    color: red;
}

伪类（pseudo-classes）

[图片上传失败...(image-c83a85-1564385964310)]

动态伪类（dynamic pseudo-classes）

使用举例

使用注意

除了a元素，:hover、:active也能用在其他元素上

a:link {
    color: red;
} 
a:visited {
    color: blue;
}   
a:hover {
    color: green;
}    
a:active {
    color: yellow;
}

动态伪类 - :focus

:focus指当前拥有输入焦点的元素（能接收键盘输入）
动态伪类编写顺序建议 :link、:visited、:focus、:hover、:active

元素状态伪类（UI element states pseudo-classes）

:enabled 启用状态
:disabled 禁用状态
:checked 被选中状态

结构伪类 （structural pseudo-classes） - :nth-child( )

:nth-child(1)
是父元素中的第1个子元素

p:nth-child(1) {
    color: red;
}

:nth-child(2n)

:nth-child(2n + 1)

:nth-child()的完整使用格式是:nth-child(an + b)

:nth-last-child()的语法跟:nth-child()类似，不同点是:nth-last-child()从最后一个子元素开始往前计数

结构伪类 - :nth-of-type( )、:nth-last-of-type( )

结构伪类 - :empty

否定伪类（negation pseudo-class）

:not()的格式是:not(x)

伪元素（pseudo-elements）

常用的伪元素有

:first-line、::first-line
:first-letter、::first-letter
:before、::before
:after、::after

为了区分伪元素和伪类，建议伪元素使用2个冒号，比

如::first-line

::first-line可以针对首行文本设置属性

伪元素 - ::first-letter

::first-letter可以针对首字母设置属性

伪元素 - ::before和::after

::before和::after用来在一个元素的内容之前或之后插入其他内容（可以是文字、图片）

attr()

在content中，还可以使用attr(属性名)来获得元素的属性值

CSS属性

常用CSS属性

按照CSS属性的具体用途，大致可以分类为

文本

color

color属性用来设置文本内容的前景色
包括文字、装饰线、边框、外轮廓等的颜色

color: blue;

text-decoration

text-decoration用于设置文字的装饰线

/*无下划线*/
text-decoration: none;
/*下划线*/
text-decoration: underline;
/*上划线*/
text-decoration: overline;
/*中间线条*/
text-decoration: line-through;

letter-spacing

分别用于设置字母间距

letter-spacing: 5px;

word-spacing

单词之间的间距

word-spacing: 30px;

text-transform

ext-transform用于设置文字的大小写转换

text-transform: uppercase;

text-indent

text-indent用于设置第一行内容的缩进

/*缩进2个文字*/
text-indent: 2em;

text-align

text-align可用于设置元素内容在元素中的水平对齐方式

 text-align: center;

字体

font-size

font-size决定文字的大小

常用的设置

font-size: 10px;

font-family

ont-family用于设置文字的字体名称

font-family: "Apple Braille", "DIN Condensed", "微软雅黑", "苹方";

@font-face

@font-face可以让网页支持网络字体(Web Font)，不再局限于系统自带的字体; 字体下载：http://font.chinaz.com/

 body {
     font-family: "Apple Braille";
 }
 @font-face {
    font-family: "Apple Braille";
    src: url("CSS/mini_cut.TTF");
 }

font-weight

font-weight用于设置文字的粗细（重量）

 font-weight: 100;

font-stlye

font-style用于设置文字的常规、斜体显示

em、i、cite、address、var、dfn等元素的font-style默认就是italic

font-style: oblique;

font-variant

font-variant可以影响小写字母的显示形式

font-variant: small-caps;

line-height

line-height用于设置文本的最小行高

 line-height: 40px;

注意区分height和line-height的区别

font

font是一个缩写属性
font-style font-variant font-weight font-size/line-height font-family

font: italic small-caps 700 20px/40px "微软雅黑";

背景

background-image 背景图片

background-image用于设置元素的背景图片

background-repeat

background-repeat用于设置背景图片是否要平铺

常见的设值有

background-size

background-size用于设置背景图片的大小

/*设置宽,高*/
background-size: 50px 100px;
    
/* 设置高度,宽度自动*/
background-size: auto 100px;
    
/* 设置宽度,高度自动*/
background-size: 100px auto;

background-position

background-position用于设置背景图片在水平、垂直方向上的具体位置

如果只设置了1个方向，另一个方向默认是center

background-position: 10px 10px;

background-origin

背景图片定位位置属性,专门用于指定从哪个区域开始显示背景图片默认从padding开始显示背景图片

位置属性

image.png

background-clip

背景绘制属性是专门用来设置背景绘制区域的 在区域之外的东西背景都不显示是

绘制属性

Sprite

什么是CSS Sprite

是一种CSS图像合成技术，将各种小图片合并到一张图片上，然后利用CSS的背景定位来显示对应的图片部分;有人翻译为：CSS雪碧、CSS精灵

使用CSS Sprite的好处

background-attachment

background-attachment可以设置以下3个值

background-color

背景颜色

background-color: #223355

background

background是一系列背景相关属性的简写属性，常用格式是

image position/size repeat attachment color

background-size可以省略，如果不省略，/background-size必须紧跟在background-position的后面,其他属性也都可以省略，而且顺序任意

cursor

cursor可以设置鼠标指针（光标）在元素上面时的显示样式

cursor常见的设值有

cursor除了可以设置系统自带的一些值以外，还可以设置图片


image.png

url( )后面的2个数字

如果图片找不到，就会使用pointer作为cursor的值

div:hover {
/*cursor: pointer;*/
cursor: url("images/heart.gif") 10 10, pointer;
}

盒子模型

盒子模型介绍

HTML中的每一个元素都可以看做是一个盒子，如右下图所示，可以具备这4个属性

image.png

上下margin传递

margin-top传递

如果块级元素的顶部线和块级父元素的顶部线重叠，那么这个块级元素的margin-top值会传递给父元素

margin-bottom传递

如果块级元素的底部线和块级父元素的底部线重叠，并且父元素的高度是auto，那么这个块级元素的margin-bottom值会传递给父元素

如何防止出现传递问题？

建议

上下margin折叠

垂直方向上相邻的2个margin（margin-top、margin-bottom）有可能会合并为1个margin，这种现象叫做collapse（折叠）

水平方向上的margin（margin-left、margin-right）永远不会collapse

如何防止margin collapse？

border（边框）

边框宽度

边框颜色

边框样式

image.png

box-shadow 阴影

box-shadow属性可以设置一个或者多个阴影

image.png

text-shadow 文字阴影

text-shadow用法类似于box-shadow，用于给文字添加阴影效果
text-shadow同样适用于::first-line、::first-letter

box-sizing

box-sizing用来设置盒子模型中宽高的行为

content-box

border-box

列表

列表相关的CSS属性

列表相关的常见CSS属性有4个：

  1. list-style-type：设置li元素前面标记的样式
    • disc（实心圆）、circle（空心圆）、square（实心方块）
    • decimal（阿拉伯数字）、lower-roman（小写罗马数字）、upper-roman（大写罗马数字）
    • lower-alpha（小写英文字母）、upper-alpha（大写英文字母）
    • none（什么也没有）

  1. list-style-image：设置某张图片为li元素前面的标记，会覆盖list-style-type的设置

  2. list-style-position：设置li元素前面标记的位置，可以取outside、inside2个值

  3. list-style：是list-style-type、list-style-image、list-style-position的缩写属性
    list-style: outside url("images/dot.png");
    一般最常用的还是设置为none，去掉li元素前面的默认标记 list-style: none;

表格

显示

块级、行内级元素

根据元素的显示类型，HTML元素可以主要分为2大类

替换、非替换元素

根据元素的内容类型，HTML元素可以主要分为2大类

元素的分类总结

image.png

CSS属性 - display

CSS中有个display属性，能修改元素的显示类型，有4个常用值

inline-block

CSS属性 - visibility

visibility，能控制元素的可见性，有2个常用值

CSS属性 - overflow

overflow用于控制内容溢出时的行为

定位

在CSS中，有3种常用的方法对元素进行定位、布局

position

利用position可以对元素进行定位，常用取值有4个

static

默认定位,不写默认

relative

相对定位,元素按照normal flow布局

可以通过left、right、top、bottom进行定位

left、right、top、bottom用来设置元素的具体位置，对元素的作用如下图所示


image.png

相对定位的应用场景

absolute

绝对定位, 元素脱离normal flow（脱离标准流、脱标）

可以通过left、right、top、bottom进行定位

定位元素（positioned element）

fixed

固定定位,元素脱离normal flow（脱离标准流、脱标）

z-index

z-index属性用来设置定位元素的层叠顺序（仅对定位元素有效）
取值可以是正整数、负整数、0

float：浮动

绝对定位、浮动都会让元素脱离标准流，以达到灵活布局的效果

可以通过float属性让元素产生浮动效果，float的常用取值

clear

clear的常用取值

解决坍塌问题

.container::after {
    content: "";
    clear: both;
    display: block;    
}

定位方案对比

image.png

过渡(transition)

过渡可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

过渡三要素

transition属性

// 一个简单的过渡效果
.contrainer {
    width: 600px;
    height: 300px;
    border: 1px solid black;
}
.box {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    transition: all 1s ease-in-out 1s;
}
.contrainer:hover .box{
    margin-left: 200px;
}

2D 转换

通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。

常用属性

  1. 平移

    • transform: translate(水平方向,垂直方向);
    • 具体的像素

  2. 缩放

    • transform: scale(水平方向,垂直方向);
    • 默认比例 1.0 如果比1.0大代表放大 如果比1.0 小 代表缩小

  3. 旋转

    • transform: rotate(45deg);
    • 单位 角度deg ; 默认是顺时针 ; 如果想逆时针旋转直接传入负值

    旋转轴向

    • transform: rotateZ(10deg) Z轴旋转
    • transform: rotateY(10deg) Y轴旋转
    • transform: rotateX(10deg) X轴旋转
    • perspective 透视效果 ,近大远小, 要想让子元素有透视效果必须把perspective添加到父元素身上,值越大 透视效果越明显

    形变中心点

    • 用于设置旋转中心点
    • transform-origin: 水平方向 垂直方向;
    • transform-origin: 0px 0px;
    • transform-origin: 200px 0px;
    • transform-origin: 50% 50%;
    • transform-origin: left top;

  1. 综合

    • transform: translate(100px,0) scale(1.5) rotate(45deg);

  2. skew 倾斜转换

  3. matrix

image.png 
.box li:nth-child(1) {
    // 平移
   transform: translate(100px, 0);
}
.box li:nth-child(2) {
    // 缩放
    transform: scale(1.5, 1.5);
}
.box li:nth-child(3) {
    // 旋转
    transform: rotate(45deg);
}
.box li:nth-child(4) {
    // 综合
    transform: translate(-100px, 0) scale(1.2) rotate(-45deg);
}

3D 转换

3D 通过 rotateX(),rotateY(),rotateZ()等属性实现3D效果,默认情况系统都是2D的,想看到某个元素的3d效果,只需要给他的父元素添加一个transform-style属性,然后设置为preserve-3d属性即可

3D 常用属性

.box {
    transform-style: preserve-3d;
    animation: y_3d 5s linear infinite;
}
    
.sub {  
    transform: rotateY(90deg);
}

@keyframes y_3d {
    from{
        transform: rotateX(0) rotateY(0) rotateZ(0);
    }
    to{
        transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
    }
}

动画

通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。

动画三要素

动画常用属性

image.png

@keyframes 动画实现

@keyframes move {
    from {
        left: 0;
    }
    to{
        left: 300px;
    }
} 

@keyframes move {
    0%{
        top: 0;
        left: 0;
    }
    25%{
        top: 0;
        left: 300px;
    }
    50%{
        top: 300px;
        left: 300px;
    }
    75%{
        top: 300px;
        left: 0;
    }
    100%{
        top: 0;
        left: 0;
    }
}

CSS继承

什么是继承?

CSS中有些属性是可继承的，何为属性的继承？

比如color、font-size等属性都是可以继承的
不能继承的属性，一般可以使用inherit值强制继承

CSS属性的优先级

按照经验，为了方便比较CSS属性的优先级，可以给CSS属性所处的环境定义一个权值（权重）

选择器的针对性越强，优先级越高

Flex布局

介绍:

弹性布局（flexible box）模块（目前是w3c候选的推荐）旨在提供一个更加有效的方式来布置，对齐和分布在容器之间的各项内容，即使它们的大小是未知或者动态变化的。

弹性布局的主要思想是让容器有能力来改变项目的宽度和高度，以填满可用空间（主要是为了容纳所有类型的显示设备和屏幕尺寸）的能力。

image.png

属性介绍

1.display: flex | inline-flex;

2.flex

3.flex-direction

4.justify-content

值 描述 白话文
flex-start 默认值。项目位于容器的开头。 让子元素从父容器的开头开始排序但是盒子顺序不变
flex-end 项目位于容器的结尾。 让子元素从父容器的后面开始排序但是盒子顺序不变
center 项目位于容器的中心。 让子元素在父容器中间显示
space-between 项目位于各行之间留有空白的容器内。 左右的盒子贴近父盒子，中间的平均分布空白间距
space-around 项目位于各行之前、之间、之后都留有空白的容器内。 相当于给每个盒子添加了左右margin外边距

5.align-items调整侧轴对齐（垂直对齐）

值 描述 白话文
stretch 默认值。项目被拉伸以适应容器。 让子元素的高度拉伸适用父容器（子元素不给高度的前提下)
center 项目位于容器的中心。 垂直居中
flex-start 项目位于容器的开头。 垂直对齐开始位置 上对齐
flex-end 项目位于容器的结尾。 垂直对齐结束位置 底对齐

6.flex-wrap控制是否换行

值 描述
nowrap 默认值。规定灵活的项目不拆行或不拆列。 不换行，则 收缩（压缩） 显示 强制一行内显示
wrap 规定灵活的项目在必要的时候拆行或拆列。
wrap-reverse 规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。

7.flex-flow是flex-direction、flex-wrap的简写形式

flex-flow: flex-direction  flex-wrap;

例如：

display: flex;
/* flex-direction: row;
flex-wrap: wrap;   这两句话等价于下面的这句话*/
flex-flow: column wrap;  /* 两者的综合 */

8.align-content堆栈（由flex-wrap产生的独立行）多行垂直对齐方式齐

值 描述 测试
stretch 默认值。项目被拉伸以适应容器。
center 项目位于容器的中心。
flex-start 项目位于容器的开头。
flex-end 项目位于容器的结尾。
space-between 项目位于各行之间留有空白的容器内。
space-around 项目位于各行之前、之间、之后都留有空白的容器内。

9.order控制子项目的排列顺序，正序方式排序，从小到大

上一篇 下一篇

猜你喜欢

热点阅读