zoukankan      html  css  js  c++  java
  • 初学HTML 04

    Css

    外部样式表
    step1:创建样式表文件,用于保存样式规则
    xxx.css
    step2:在页面对样式表文件进行引入
    <head>
    <link rel="stylesheet" type="text/css" href="样式表文件路径" />
    </head>

    优先级
    样式定义冲突时,按照不同样式规则的优先级来应用样式

    浏览器缺省设置 最低
    外部样式表或内部样式表
    就近原则:就近优先
    内联样式 最高


    !important最高优先级规则 :
    调整样式规则的优先级
    p{
    color:red !important;
    }

    通用选择器
    作用:匹配页面上的任何一个元素
    语法:*{}
    *{
    font-size:12px;
    /*...*/
    }

    元素选择器
    别名:标签选择器、标记选择器
    作用:匹配页面上指定的元素
    语法:元素名称作为选择器

    <head>

    <style>

    h1{

    更改样式

    }

    </style>

    </head>

    类选择器
    作用:通过元素的class属性值,对类选择器进行引用
    语法:.类名{}
    使用: <div class="类名"></div>
    注意:类名不能以数字开头

    .div123{}          
    <div class="div123"></div>

    .q1{}

    <div calss=”q1”></div>   

    id选择器
    为标有特定id的html元素指定样式
    语法:#id值{}
    #header{

    }
    <div id="header"></div>

    群组选择器
    语法:选择器声明是以 , 隔开的选择器列表
    场合:将一些相同的规则用于多个元素时
    div,p,#p1,div.top{
               color:red;
                  }

     

    子代选择器
    只通过父子级关系定位元素
    语法:选择器1>选择器2
    #d1>div{}

    伪类选择器
    特点:匹配元素某种特定的状态
    语法: 由 :作为结合符
    选择器:伪类选择器{}
    CSS伪类可以分为:
    1、链接伪类
    :link 匹配尚未访问的超链接
    :visited 匹配访问过的超链接
    2、动态伪类
    :hover 匹配鼠标悬停在html元素的状态
    :active 匹配元素被激活时的状态
    :focus 匹配元素获取焦点时的状态(多数使用在 文本框 上)

    溢出处理
    属性:
    overflow
    overflow-x : 横向溢出处理方式
    overflow-y : 纵向溢出处理方式
    取值:
    visible :溢出可见
    hidden :溢出隐藏
    scroll :出现滚动条

    auto :自动不溢出不显示滚动条,溢出的话则显示滚动条

    能够修改尺寸属性的元素
    1、块级元素
    p,div,hn,ul,ol,dl,dt,dd

    2、存在widthheight属性的html元素
    imgtable

    行内元素:无法修改尺寸

    边框

    简写方式:border:width style color;

    width : 宽度 , 以px为单位
    style : 样式   取值: solid 实线
                          dotted 虚线
                           dashed 虚线

    color : 颜色#rrggbb,...

    注意:颜色取值可以为 transparent(透明色)

    边框倒角
    属性 : border-radius
    取值 : 具体数值 或 %

    obrder-radius:10px      四边同时变

    border-radius:10px 40px    上下 10    左右;40

    单独定义:
    border-top-left-radius:
    border-bottom-right-radius:

  • 相关阅读:
    超级钢琴 2010年NOI
    vijos P1375 大整数(高精不熟的一定要做!)
    COGS 445. [HAOI2010]最长公共子序列
    系统升级
    mariabd mysql升级mariadb
    mysql view 视图
    mysql 杂
    mysql主从复制
    DNS迭代查询与递归查询的区别
    Python 中 str 和 repr 的区别
  • 原文地址:https://www.cnblogs.com/nnnnmmmm/p/10407480.html
Copyright © 2011-2022 走看看