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

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

一、基础知识

语法:样式名:值;
样式分类
  • 行内样式:在标签上写style属性(优先级最高)
  • 内嵌样式:在head标签里写style标签,只对当前网页生效
    即:
  • 外部样式:在head标签里写link标签
    例:此处引用了style.css文件地址

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

二、选择器(selector)

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

三、上中下基本布局

2020培训0706-0708【web入门】笔记「三」CSS专题整理_第5张图片

四、特性总结

继承性

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

动画性

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

文本样式
1、值单位
  • 像素(px):默认的网页字体大小是16px,一般都会设置14px
  • 相对单位(em):以当前父元素为基础的倍数,可以写小数
    root单位(rem):以body为基础
2、颜色单位

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

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

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

  • border(设置图片边框):
    边框可以装饰图片,border是复合属性是由,边框宽度(border-width),边框线风格(border-style),边框颜色(border-color)构成
    2020培训0706-0708【web入门】笔记「三」CSS专题整理_第17张图片
    为不同的边框分别设置样式:【border-left ,
    border-right , border-top , border-bottom】例如border-right-color有4个方向可以单独设置,也可以一次设置。如果提供四个参数值,将按照上右下左的顺序作用于四边;如果提供三个,第一个用于上,第二个用于左右,第三个用于下;如果提供两个,第一个用于上下,第二个用于左右;如果只提供一个,用于全部的四边。
  • 图片宽度设置:
    百分比是相对大小,是相对于外容器(标签)的宽度,当窗口resize,图片也会变,注意仅设置了图片的宽度,就会按比例缩放,同理,仅设置height的相对高度也会按比例缩放。两者同时设置当然是无比例缩放。
  • 图文混排
    文字环绕:需要借助浮动的特性,因为被浮动的元素脱离标准流,下面的标签就上去了
  • 设置图片与文字的对齐方式:
    横向对齐方式:text-align
    纵向对齐方式:

    ””文字


    默认情况下,行内的图像的最下端将与同行的文字的基线对齐,改变这种方式需要用vertical-align:text-top | text bottom | middle
    2020培训0706-0708【web入门】笔记「三」CSS专题整理_第18张图片
    浏览器运行:
    在这里插入图片描述

五、盒子模型

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

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

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


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>boxtitle>
    <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( ' 路径 ' ) 注意文件路径,上一级文件夹可以不写,同级文件夹必须写清楚


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>imgtitle>
    <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专题整理_第19张图片
    浏览器运行:
    2020培训0706-0708【web入门】笔记「三」CSS专题整理_第20张图片
  2. background-position:水平 垂直
    水平:left | center | right | 30% | 20px
    垂直:top | center | bottom | 50% | 20px
    2020培训0706-0708【web入门】笔记「三」CSS专题整理_第21张图片
    另外,transition:all 3s;可以设置图片滚动

七、浮动

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

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

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

你可能感兴趣的:(笔记,css,html,web)