Web开发 | CSS

2019-09-29 本文已影响0人 Ricsy

一、CSS

样式表、层叠样式表、级联样式表

主要用于设置HTML页面中的
➢ 文字内容（字体、大小、对齐方式等）
➢ 图片的外形（宽高、边框样式、边距等）
➢ 版面的布局
等外观显示样式

1.1 CSS基本语法

写在style标签中
放在head标签内部

<head>
    <style type="text/css">
        /* CSS代码写在这 */
        [控制对象名]{属性1:值;属性2:值;...;}
    </style>
</head>

1. 常用文字属性

属性	说明
`font-family`	字体
`font-size`	字号
`color`	颜色
`text-align`	文本水平对齐方式 `left`（默认）、`center`、`right`
`text-indent`	首行缩进 eg: `text-indent: 2em`

2. 实体化三属性

属性	属性名称
宽度	`width`
高度	`height`
背景颜色	`background`

3. 选择器

选中控制的对象

2.2 CSS引入方式

2.2.1 行内式

书写在某标签的开始标签的style属性中

eg:

<p style="color: red;">哈哈</p>

2.2.2 内嵌式

结构与样式半分离

一般格式：

<head>
    <style type="text/css">
        /* CSS代码写在这 */
        [控制对象名]{属性1:值;属性2:值;...;}
    </style>
</head>

2.2.3 外链式

新建单独的.css文件，将文件使用link标签引入到html页面中

eg:

default.css

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

2.2.4 总结

提示：

1. 行内式

停留在理论上，实际中不建议使用

缺点：
增加代码量，不方便修改

2. 内嵌式

优点：
电商首页常用，优化加载速度（内嵌式>外链式）
缺点：
html和css代码没有实现分离，不便于修改

3. 外链式

优点：
实现了代码分离，方便修改和管理
缺点：
运行速度比内嵌式稍慢

二、CSS选择器

2.1 基础选择器

基础选择器	说明
标签选择器	直接在CSS语法中写标签名就可以选中对应的标签 ➢ div代表大盒子（容器存放内容的） ➢ span代表小盒子（容器存放内容的）
id选择器	在CSS语法中写`#`加id就可以选中格式： `#[id]{属性1:值;属性2:值;...;}`
类选择器`常用`	在CSS语法中写`.`加类名就可以选中格式： `.[类名]{属性1:值;属性2:值;...;}`

绝大多数都会选择类选择器,因为类名可以重复进行复用并且一个标签有多个类名，相当于称号
id选择器中，一个标签只能有一个id，唯一且不可复用，相当于身份证号

eg(Google案例)：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            span{font-size: 100px;}
            .logo_g {color: #4285f4;}
            .logo_o {color: #ea4335;}
            .logo_o2{color: #fbbc05;}
            .logo_l {color: #34a853;}
            .logo_e {color: #ea4335;}
        </style>
    </head>
    <body>
        <span class="logo_g">G</span>
        <span class="logo_o">o</span>
        <span class="logo_o2">o</span>
        <span class="logo_g">g</span>
        <span class="logo_l">l</span>
        <span class="logo_e">e</span>
    </body>
</html>

2.1.1 基础选择器权重

id选择器>类选择器>标签选择器

2.2 复合选择器

2.2.1 后代选择器

一个空格表示后代关系
用空格来连接，代表找到后代元素
儿子、儿子的儿子...也算后代

eg:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            div span{color: blue;}
        </style>
    </head>
    <body>
        <div>
            <p>
                <span>我是老p家的span</span>
            </p>
            <div>
                <span>我是老div家的sapn</span>
            </div>
        </div>
    </body>
</html>

2.2.2 并集选择器

用,来连接选择器，代表这些元素同时被选中
eg:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            p,div,h2,h3,h4,.span1,#span2 {color: blue;}
        </style>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <p>我是p</p>
        <div>我是div</div>
        <h2>我是h2</h2>
        <h3>我是h3</h3>
        <h4>我是h4</h4>
        <span class="span1">我是带class的span</span>
        <span id="span2">我是带id的span</span>
    </body>
</html>

提示：

一行可放多个span

2.2.3 标签指定式（指定标签式）

格式：[标签].[类名]{属性1:值;属性2:值;...}

标签与.类名没有空格

eg:

p.p2{color: red;}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            p.p2{color: red;}
        </style>
    </head>
    <body>  
        <p>我是p1</p>
        <p class="p2">我是p2</p>
    </body>
</html>

2.2.4 复合选择器权重

1. 人为技巧

名称	重量
标签	1斤
类	10斤
id	100斤

2. 总结

(1) 引入方式对比

行内式权重最高
外链与内嵌权重一样，先写的会被后写的覆盖
内嵌的权重最大，如果想要覆盖它，就只能从样式表中添加，用!important提高到最高权重

(2) 复合选择器权重

斤数越大权重越高
斤数一样，先写的被后写的覆盖

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            /* 标签1斤 类10斤 id100斤 */
            /* id选择器 100斤 */
            #span_id{color: pink;}
            /* 11斤 */
            .div1 span{color: orange;}
            span.span1{color: aqua;}
            /* 10斤 */
            .span{color: yellow;}
            /* 2斤 */
            p span{color: blue;}
            /* 1斤 */
            span{color: red;}
            
            /* 1斤 */
            span{color: red!important;}
        </style>
    </head>
    <body>  
        <div class="div1">
            <p>
                <span class="span1" id="span_id">哈哈</span>
            </p>
        </div>
    </body>
</html>

三、CSS属性

3.1 常用文字属性

属性	属性名称	取值
文字粗细	`font-weight`	正常 `normol` 加粗 `bold`
文字倾斜	`font-style`	正常 `normol` 倾斜 `italic`
文字修饰	`text-decoration`	下划线 `underline` 顶划线 `overline` 删除线 `line-through` 无 `none`
强制字母换行	对象：长的字符串	`word-break: break-all`
首行缩进		`text-indent:2em`

提示：

伪类:hover 代表鼠标悬停状态
eg:
a:hover{color:red;}

3.2 行高属性

格式：line-height

一行文字的结束到上一行文字结束的间距

eg:
p{width:200px; height:200px; background:pink; line-height:50px;}

3.3 边框属性

solid实线、dashed虚线

只有实线和虚线没有兼容性问题的，其他方式的线都有不同程度的兼容性问题

border

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            div{width: 200px;height: 200px;background: pink;border: 10px solid red;}
        </style>
    </head>
    <body>  
        <div></div>
    </body>
</html>

border-top、border-bottom、border-left、border-right

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            div{width: 200px;height: 200px;background: pink;
                border-top: 10px solid green;
                border-bottom: 5px solid red;
                border-left: 20px dashed orange;
                border-right: 40px solid gainsboro;}
        </style>
    </head>
    <body>  
        <div></div>
    </body>
</html>

3.4 盒子模型组成

宽高
border边框
padding内边距（内容和边框的距离）
margin外边距（盒子和盒子之间的距离）

更新中......