欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-08-12 10:42:16
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)

语法:

选择器名称
{
     样式:值;
 }

分类

  • 基本选择器——标签选择器
  • 基本选择器——id选择器(符号使用#)
  • 基本选择器——class选择器(符号使用.)
    用法举例:
    2020培训0706-0708【web入门】笔记「三」CSS专题整理
    浏览器运行:
    2020培训0706-0708【web入门】笔记「三」CSS专题整理
  • 复杂选择器——分组选择器(使用逗号分隔多个选择器)
  • 复杂选择器——交集选择器(标签选择加上class或id选择器,注意中间没空格)
  • 后代选择器(使用空格)加选择符号 > ,只对子代使用而不对其他后代使用
    (权重比基本选择器高)
  • 属性选择器(语法为 [ 属性名 ] )
    2020培训0706-0708【web入门】笔记「三」CSS专题整理
  • 全局重置( * )
    2020培训0706-0708【web入门】笔记「三」CSS专题整理

三、上中下基本布局

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)绝对类型:所谓绝对,就是无论显示设置的分辨率是多少,都代表相同的长度
    2020培训0706-0708【web入门】笔记「三」CSS专题整理
  • font-family(字体):用逗号分隔多个字体表示先找第一个字体,如果客户端电脑没有就使用第二个,以此类推,否则使用默认字体
    2020培训0706-0708【web入门】笔记「三」CSS专题整理
  • font-style(文字倾斜度): normal | oblique | italic |
    2020培训0706-0708【web入门】笔记「三」CSS专题整理
  • font-weight(字体加粗): normal | bold | bolder | lighter | 100~900(数字越大越粗)
    2020培训0706-0708【web入门】笔记「三」CSS专题整理
  • text-transform(英文字母大小写转换): lowercase | uppercase | capitalize(首字母大写)
    2020培训0706-0708【web入门】笔记「三」CSS专题整理
  • font-size(字体大小):略
  • text-decoration(文字的装饰效果):复合属性,color、style、line,值为 none | underline等
    2020培训0706-0708【web入门】笔记「三」CSS专题整理
  • text-indent(首行缩进):(中文一般是2em)
    2020培训0706-0708【web入门】笔记「三」CSS专题整理
  • 设置字词间距
    letter-spacing(中文间距)
    word-spacing
  • line-hight(设置段落内部的文字行高):
    技巧:文本垂直居中,设置文本高度等于行高即可实现文本垂直居中
    2020培训0706-0708【web入门】笔记「三」CSS专题整理
  • padding(内边距)
  • margin(设置段落外边距)
  • text-align(文本水平位置):left | center | right | justify
  • verticl-align(垂直对齐方式):只有td能用
4、图片设置

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

  • border(设置图片边框):
    边框可以装饰图片,border是复合属性是由,边框宽度(border-width),边框线风格(border-style),边框颜色(border-color)构成
    2020培训0706-0708【web入门】笔记「三」CSS专题整理
    为不同的边框分别设置样式:【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
    2020培训0706-0708【web入门】笔记「三」CSS专题整理
    浏览器运行:
    2020培训0706-0708【web入门】笔记「三」CSS专题整理

五、盒子模型

一个盒子实际所占有的宽度(或高度)是由“内容+内边距+边框+外边距”组成,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>
  1. 与背景图片样式配合使用的有以下样式:background-repeat:repeat | no-repeat | repeat-x | repeat-y
    2020培训0706-0708【web入门】笔记「三」CSS专题整理
    浏览器运行:
    2020培训0706-0708【web入门】笔记「三」CSS专题整理
  2. background-position:水平 垂直
    水平:left | center | right | 30% | 20px
    垂直:top | center | bottom | 50% | 20px
    2020培训0706-0708【web入门】笔记「三」CSS专题整理
    另外,transition:all 3s;可以设置图片滚动

七、浮动

让块级元素并列显示、图片环绕或名片效果
float: right | left | none
2020培训0706-0708【web入门】笔记「三」CSS专题整理

特点
  1. 被浮动的元素宽度不再是100% 而是根据内容改变
  2. 被浮动的元素脱离标准显示流,意思是不在原来的位置了,所以下面的元素往上移动一个标准流
  3. 一行有两个被浮动元素时,若外容器宽度不足以放下两个元素,第二个浮动的元素就会被挤到下面
为什么要清浮动?
  1. 为了让父元素能够包裹浮动的子元素,如果父元素只包含浮动元素,那么它的高度就会塌缩为零
  2. 使浮动元素到下一行
如何清浮动?
  1. 给盒子加高
  2. clear:both(放到所有浮动元素的下面,否则只有clear上面的浮动元素被包含)
    2020培训0706-0708【web入门】笔记「三」CSS专题整理
  3. overflow:hidden
  4. 伪类
    2020培训0706-0708【web入门】笔记「三」CSS专题整理
    :before // 在指定标签的前面加元素

————————————————————————————————
【新手笔记 欢迎指正】

本文地址:https://blog.csdn.net/RK_Dangerous/article/details/107296754