2020培训0706-0708【web入门】笔记「三」CSS专题整理

程序员文章站 2022-04-10 09:37:47

CSS（cascade style sheet）层叠样式表【我觉得类似于C里面引用函数】一、基础知识语法：样式名：值；样式分类行内样式：在标签上写style属性（优先级最高）内嵌样式：在head标签里写style标签，只对当前网页生效即：外部样式：在head标签里写link标签例：此处引用了style.css文件地址关于优先级：在值...

CSS（cascade style sheet）层叠样式表
【我觉得类似于C里面引用函数】

一、基础知识

语法：`样式名：值；`

样式分类

行内样式：在标签上写style属性（优先级最高）
内嵌样式：在head标签里写style标签，只对当前网页生效
即：<style>写选择器</style>
外部样式：在head标签里写link标签
例：<link rel="stylesheet" href="style.css">此处引用了style.css文件地址

关于优先级：在值后面加 ! important 后优先级最高

二、选择器（selector）

语法：

选择器名称
{
     样式：值；
 }

三、上中下基本布局

2020培训0706-0708【web入门】笔记「三」CSS专题整理

四、特性总结

继承性

CSS部分的属性具有继承性，意思是影响后代
例如：font-size、font-weight等

动画性

举例font-weight的动画性
2020培训0706-0708【web入门】笔记「三」CSS专题整理

文本样式

1、值单位

像素（px）：默认的网页字体大小是16px，一般都会设置14px
相对单位（em）：以当前父元素为基础的倍数，可以写小数
root单位（rem）：以body为基础

2、颜色单位

颜色定义：在HTML页面中，颜色统一RGB的模式显示，也就是通常人们所说的“红绿蓝”三原色模式。每种颜色都由这3种颜色的不同比重组成。当红绿蓝3个分量都设置为255时就是白色，例如rgb(100%,100%,100%)和#FFFFFF
几种表达方法：
2020培训0706-0708【web入门】笔记「三」CSS专题整理

渐变色：

<body style="background: linear-gradient ( orange, red );">

3、字体样式

长度单位
（1）相对类型：所谓相对，就是要有一个参与基础，相对于该参考基础而设置的尺度单位
px（piexl）像素
em：这是设置以目前字符的高度为单位
（2）绝对类型：所谓绝对，就是无论显示设置的分辨率是多少，都代表相同的长度
font-family（字体）：用逗号分隔多个字体表示先找第一个字体，如果客户端电脑没有就使用第二个，以此类推，否则使用默认字体
font-style（文字倾斜度）： normal | oblique | italic |
font-weight（字体加粗）： normal | bold | bolder | lighter | 100~900(数字越大越粗）
text-transform（英文字母大小写转换）： lowercase | uppercase | capitalize（首字母大写）
font-size（字体大小）：略
text-decoration（文字的装饰效果）：复合属性，color、style、line，值为 none | underline等
text-indent（首行缩进）：（中文一般是2em）
设置字词间距
letter-spacing（中文间距）
word-spacing
line-hight（设置段落内部的文字行高）：
技巧：文本垂直居中，设置文本高度等于行高即可实现文本垂直居中
padding（内边距）
margin（设置段落外边距）
text-align（文本水平位置）：left | center | right | justify
verticl-align（垂直对齐方式）：只有td能用

4、图片设置

新建img文件夹拖拽图片至文件夹完成创建任务
2020培训0706-0708【web入门】笔记「三」CSS专题整理
输入代码，在src中输入图片地址，完成图片导入

border（设置图片边框）：
边框可以装饰图片，border是复合属性是由，边框宽度（border-width），边框线风格（border-style），边框颜色（border-color）构成

为不同的边框分别设置样式：【border-left ,
border-right , border-top , border-bottom】例如border-right-color有4个方向可以单独设置，也可以一次设置。如果提供四个参数值，将按照上右下左的顺序作用于四边；如果提供三个，第一个用于上，第二个用于左右，第三个用于下；如果提供两个，第一个用于上下，第二个用于左右；如果只提供一个，用于全部的四边。
图片宽度设置：
百分比是相对大小，是相对于外容器（标签）的宽度，当窗口resize，图片也会变，注意仅设置了图片的宽度，就会按比例缩放，同理，仅设置height的相对高度也会按比例缩放。两者同时设置当然是无比例缩放。
图文混排
文字环绕:需要借助浮动的特性，因为被浮动的元素脱离标准流，下面的标签就上去了
设置图片与文字的对齐方式：
横向对齐方式：text-align
纵向对齐方式：<p><img src=”” alt=””>文字<p>
默认情况下，行内的图像的最下端将与同行的文字的基线对齐，改变这种方式需要用vertical-align：text-top | text bottom | middle

浏览器运行：

五、盒子模型

一个盒子实际所占有的宽度（或高度）是由“内容+内边距+边框+外边距”组成，css中可以通过设定width和height的值来控制内容所占的矩形的大小，并且对于任何一个盒子，都可以分别设定4条边各自的属性。

关键词：
内容：content（标签里面放的东西）
内边距：padding（内容和边框之间的距离）
边框：border（可有可无）
外边距：margin（盒子与周围的距离）

盒子宽度=左外边距+左边框+左内边距+内容+右内边距+右边框+右外边距
盒子高度=上外边距+上边框+上内边距+内容+下内边距+下边框+下外边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>box</title>
    <style>
        #box
        {
            border-top: 2px solid #000;
            border-right: 20px dotted #000;
            border-bottom: 5px solid #0f0;
            border-left: 6px solid #0ff;
            margin: 30px 20px 20px 50px;
            padding-top: 10px;
            padding-right: 10px;
            padding-bottom: 10px;
            padding-left: 10px;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div id="box">
        <span>盒子</span>
    </div>
</body>
</html>

六、背景图片（background-image）

值是url（ ' 路径 ' ） 注意文件路径，上一级文件夹可以不写，同级文件夹必须写清楚

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>img</title>
    <style>
        #logo
        {
            background-image: url('css/img/sina.png');
            width: 136px;
            height: 39px;
            vertical-align: middle;
            display: inline-block;
        }
        #header
        {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header-logo" id="header">
            <span id="logo"></span>
        </div>
    </div>
</body>
</html>

与背景图片样式配合使用的有以下样式：background-repeat：repeat | no-repeat | repeat-x | repeat-y

浏览器运行：
background-position：水平垂直
水平：left | center | right | 30% | 20px
垂直：top | center | bottom | 50% | 20px

另外，transition:all 3s;可以设置图片滚动