CSS基础之CSS概述、CSS语法、尺寸与边框

女爷i 2022-07-13 09:52 187阅读 0赞

1、CSS概述  
  1、问题  
    1、控制页面中所有的 文本 颜色为 红色  
    2、控制页面中所有 div 的文本颜色为 蓝色  
    3、将所有 div 的颜色变为 黄色  
  
  
    HTML元素的不足:  
      1、要完成相同的效果，使用的是不同的属性  
      <body text="red"></body>  
      <font color="blue"></font>  
      2、没有提升 html属性的 可重用性和可维护性  
      可重用性：重复的操作，不用重复的写  
  
  
    可以通过css解决以上两个问题  
  2、什么是CSS  
  CSS（Cascading Style Sheets），层叠样式表，级联样式表，简称：样式表。专门用于定义页面元素的样式的。  
  以统一的方式定义页面元素的样式  
  
  
  CSS实现了内容与表现相分离  
  提升了代码的可重用性 和 可维护性+  
  
  
  3、CSS 与 HTML之间的关系  
    HTML：专门用于构建网页结构  
    CSS：专门构建HTML网页的样式  
  
  
    HTML属性效果 与 CSS样式效果相冲突的话，优先使用CSS定义页面元素的效果  
  
  
2、CSS语法  
  1、使用CSS样式表  
    1、内联方式（注：也没有提升 属性的 可重用性和可维护性，但是采用的是CSS的方式）  
      又称为：行内样式  
      将样式定义在某个html元素中  
      语法：  
      <ANY style="样式声明（若干条）；样式声明；"></ANY>  
      样式声明：  
        由 属性名称 和 属性值 来组成，属性名称和属性值之间用":"来关联  
      ex:  
        属性名称      属性值  
        color：定义他所在的行的颜色属性； red,blue,yellow  
        background-color：（背景颜色）     合法颜色值即可...（同上）  
        font-size                          以px，pt为单位的数值  
  
  
        控制以下 文本颜色为 红色，背景颜色为 黄色 文字大小为24px  
        <p>静夜思</p>  
    2、内部样式表  
      将样式定义在网页的一块独立位置处  
      在<head></head>中增加一对 <style></style>元素，在<style>元素中 定义元素的样式，具体语法如下：  
      ex:  
      <head>  
        <title></title>  
        <style>  
          样式规则1  
          样式规则2  
          ...  
          样式规则n  
        </style>  
      <head>  
        
      样式规则，由两部分组成  
        1、选择器  
          选择(规范)页面中哪些元素能够使用声明好的样式  
          比如：元素选择器，由元素名称来充当选择器，控制某标记对应所有页面元素的样式  
           
        2、若干样式声明  
          样式规则 语法结构：  
  
  
          选择器｛  
            样式声明1；  
            样式声明2；  
            ...  
            样式声明n；  
          ｝  
          ex:  
          p\{  
            color:red;  
            background-color:yellow;  
            font-size:24px;  
          \}  
    3、外部样式表(样式规则同内部样式语法规则一样)  
      将样式定义在外部的"样式表文件(\*.css)"中  
      1、创建 .css文件，编写样式规则  
      2、在要使用 样式表的 html文件中进行引入  
        <head>  
          <link rel="stylesheet" href="样式表文件 url">  
        </head>  
  
  
  2、CSS样式表特征  
    1、继承性  
      大部分样式属性是可以被继承  
    2、层叠性  
      可以为一个元素定义多个样式规则  
      如果属性不冲突时，多个样式规则可以层叠为一个（即都可以应用到当前元素上）  
    3、优先级  
      在层叠性基础上，如果 样式定义 冲突的话，那就会按照不同使用方式的优先级，来选择性应用样式  
      低：浏览器默认设置  
      中：外部样式表 和 内部样式表  
        就近原则  
        （后定义优先 即 谁后定义谁优先）  
      高：内联方式  
      （在非作弊的情况下，内联方式级别最高）  
    4、!important 规则(即上面所说的“作弊方式”，不建议在页面中使用的过多)  
      显示调整样式属性的优先级  
      语法：  
        属性名:值 !important;、  
      谨慎使用  
  
  
  3、选择器（重点）  
    1、作用  
      选择（规范）页面中哪些元素能够使用声明好的样式为了匹配页面的元素  
  
  
    2、详解  
      1、通用选择器  
        作用：匹配页面中所有的元素  
        语法：\*\{\}  
        缺点：效率较低，尽可能少用,可以通过 使用body 的继承性 来替代 \*  
  
  
      2、元素选择器  
        作用：匹配某一标记所对应的页面中所有的元素  
        语法：元素/标签\{\}  
        ex：  
        div\{/\*匹配页面中所有div\*/\}  
        span\{/\*匹配页面中所有span\*/\}  
        li\{/\*匹配页面中所有li\*/\}  
      3、类选择器  
        作用：事先定义好样式，可以任由元素通过class属性进行引用  
        语法：  
          定义：.类名\{\}  
          引用：<ANY class="类名"></ANY>  
  
  
        多类选择器的引用方式：  
        让一个元素引用多个类选择器，中间用 空格 隔开即可  
  
  
        分类选择器的声明方式：  
          将元素选择器和类选择器结合到一起进行声明，实现对某种元素中的不同样式细分控制  
  
  
          ex：想要控制 class为important的div元素，  
          文字大小为 48px  
            
          语法：元素选择器.类选择器\{\}  
      4、id选择器(专属定制)  
        作用：匹配 指定id值的元素的 样式  
        ex：  
          <div id="nav"></div>  
  
  
        语法：\#ID值\{\}  
  
  
      【2、3、4统称为基础选择器】  
      5、群组选择器  
        群组选择器的声明以一个“，”隔开的选择器列表  
        语法：  
          选择器1，选择器2，...\{\}  
  
  
        ex:  
          \#title,p.redColor,.important,span\{  
            color:red;  
          \}  
      6、后代选择器  
        后代：  
              多于 一级 层级关系的元素，只能叫后代  
              只具备 一级 层级关系的元素 也可以叫后代  
        语法：  
          选择器1 选择器2\{\}  
          语义：匹配 在选择器1 中的 所有后代元素选择器2  
          ex：  
            \#content span()  
      7、子代选择器  
        子代：  
            只具备 一级 层级关系的元素 称之为子代  
        语法：  
            选择器1>选择器2\{\}  
        语义：匹配 在选择器1 中的 子级元素 选择器2  
  
  
      8、伪类选择器  
        伪类：专门匹配元素不同状态的选择器  
        分类：  
          1、链接伪类  
          2、动态伪类  
          3、目标伪类  
          4、元素状态伪类  
          5、结构伪类  
          6、否定伪类  
        语法：  
          以“:”作为开始的选择器  
          1、链接伪类  
            1、:link  
              适用于未被访问的超链接  
            2、:visited  
              适用于访问过的超链接  
          2、动态伪类  
            1、:hover  
              适用于鼠标悬停在html元素时  
            2、:active  
              使用于html元素被激活时  
            3、:focus  
              适用于html元素获取焦点时  
  
  
  
  
      选择器优先级  
  
  
      选择器类型        权值  
  
  
      元素选择器      0，0，0，1  
      类选择器        0，0，1，0  
      伪类选择器      0，0，1，0  
      ID选择器        0，1，0，0  
      内联样式        1，0，0，0  
  
  
（思考：当使用元素选择器时，就可以实现大部分功能了，为何还要使用其他选择器？  
          答：  
          元素选择器用于同名元素的批量引用；  
          类选择器可以用于某个元素进行样式灵活选用；即某个单独的元素是引用；  
          多类选择器是某个元素引用多个样式；  
          分类选择器；将元素选择器和类选择器结合起来，针对于某种元素不同样式的细分详细控制）  
  
  
  
  
3、尺寸与边框  
  1、css单位  
    1、尺寸单位  
      1、px：像素  
      2、pt：磅（1pt=1/72 in）  
      3、in：英寸，1 in=2.54 cm  
      4、% ：百分比，占据 当前元素 或 父元素对属性的 占比  
      5、em：倍数，多数用于 文字大小的描述（响应式布局时用）  
      6、mm：毫米  
      7、cm：厘米  
      注意：css中尺寸单位是不能省略的。  
    2、颜色单位（取值）  
      1、rgb(r,g,b)  
      (r:red,范围0-255)  
     （g:green,范围0-255）  
      (b:blue,范围0-255)  
  
  
      ex：  
        background-color:rgb(0,0,0);黑色  
        background-color:rgb(255,0,0);红色  
        background-color:rgb(255,255,255)白色  
      2、rgb(r%,g%,b%)  
      3、rgba(r,g,b,alpha)  
        alpha:透明度0~1之间的数字  
        0：完全透明  
        1：完全不透明  
        0.5：半透明  
      4、\#rrggbb  
        通过6位16进制数字表示一个颜色  
        每位数字范围：0-9 A-F  
        \#00ff00：绿色  
        \#ff0000：红色  
        \#1a2b3c：？  
      5、\#rgb  
        \#rrggbb 每两位数字相同时，可以使用\#rgb简化  
        \#00ff00 -> \#0f0  
        \#aabbcc -> \#abc  
        \#accdda -> x  
      6、颜色的英文表示  
        red，green，blur,.orange,pink  
  
  
  2、尺寸属性  
    1、作用  
      用于设置元素的宽度和高度  
      单位一般为 px 或 %(父元素对应属性的占比)  
    2、语法  
      1、宽度  
        width  
        min-width：最小宽度  
        max-width: 最大宽度  
  
  
      2、高度  
        height  
        min-height：最小高度  
        max-height：最大高度  
        
      注意：  
        页面中所有元素的高度，在不指定的情况全部自适应（以内容为主）。  
  
  
        页面中所有块级元素的宽度，默认占据父元素的100%  
        页面中  
    3、页面中允许修改 尺寸 属性的元素  
      1、所有块级元素都允许修改  
      2、大部分的行内块元素  
        所有的表单元素都是行内块元素  
        除radio、checkbox之外，其他元素允许修改尺寸  
      3、本事html元素就具备width 和 height的  
      img，table  可以修改尺寸  
      4、行内元素（除具备width和height之外）是不能修改尺寸  
          span,a,b,i,s,b ... 不能修改尺寸  
    4、溢出  
      1、什么是溢出  
        使用尺寸属性限制元素大小时，如果内容所需要的空间大于元素本身空间，则会导致内容溢出  
      2、溢出处理属性  
        属性：overflow  
              overflow-x：横向溢出处理  
              overflow-y：纵向溢出处理  
        取值：  
          1、visible  
            默认值，溢出可见  
          2、hidden  
            隐藏  
          3、scroll  
            滚动，让元素出现滚动条，溢出时，滚动条可用  
          4、auto  
            自动，溢出时显示滚动条并可用，非溢出时，不显示滚动条  
            
  3、边框属性  
    1、边框  
      1、简写方式  
        border：width style color；  
        作用：设置元素上下左右四个边框的宽度，样式以及颜色  
          width：边框的宽度（尺寸）  
          style：边框的样式  
            取值：  
              1、solid：直线  
              2、dotted：虚线(点状)  
              3、dashed：虚线(线状)  
          color：边框的颜色,可以取值为 transparent（透明）  
          
        ex：  
          div\{  
            border:1px solid red;  
          \}  
        
      2、单边定义  
        border-方向：width style color；  
        方向可以被以下关键字所取代  
        top：上  
        right：右  
        bottom：下  
        left：左  
        ex：  
          border-bottom:2px dashed \#00ff00;  
        
      3、单属性定义  
          border-属性：值；  
          属性可以被以下关键字取代  
          width：宽度  
          style：样式  
          color：颜色  
          ex：  
            border-width:5px;  
 border-style:solid;  
 border-color:\#f00f00;  
  
  
      4、单边单属性定义  
          border-方向-属性：值；  
          方向：top/right/bottom/left  
          属性：width/style/color  
          ex:  
              border-top-color:yellow;

border-right-style:dotted;

![Center][]

[Center]: /images/20220713/f80d0163551e493f8ab3d4466007a484.png