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

2017-01-06 08:03:41来源:CSDN作者:Andone_hsx人点击

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;


最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台