zoukankan      html  css  js  c++  java
  • 样式表

    样式表
    分类
    内联
    写在标签里面
    style="样式"
    控制精确,代码重用性差
    内嵌
    嵌在页面的head里面
    <style type="text/css"></style>
    控制没有内联的精确,代码重用性好
    外部
    单独的样式文件
    引入:右键-CSS样式表-附加样式表
    引入:<link href="test.css" rel="stylesheet" type="text/cs
    控制没有内联的精确,代码重用性最好
    选择器
    样式表用来选取元素的
    标签
    根据标签名选中元素
    class
    . (点)
    根据class名来筛选元素
    id
    # (井号)
    根据id名来筛选出唯一元素
    复合
    并列
    div,span
    class="第一种 第二种"
    后代
    #list li
    点筛选
    div.s
    大小
    width
    宽度
    height
    高度
    背景
    background-color
    背景色
    background
    rgb(x,x,x)
    rgba(x,x,x,x)
    最后一个是透明度 1为不透明 0为全透明
    url(图片的相对路径)
    不平铺
    no-repeat
    background-image
    背景图片
    background-repeat
    背景图的平铺方式
    background-position
    背景图片位置
    background-attachment
    设置背景图片是否滚动
    background-size
    背景图的大小 200px 200px
    字体
    font-family
    字体样式
    font-size
    字体大小 12px 14px
    font-style
    italic倾斜
    font-weight
    bold加粗
    text-decoration
    underline下划线
    overline上划线
    line-through删除线
    none没有,用来去掉超链接的下划线
    color
    字体颜色
    对齐方式
    text-align
    水平对齐方式
    vertical-align
    垂直对齐方式,配合行高使用
    line-height
    行高
    text-indent
    缩进 单位像素
    边界边框
    margin
    外边距 上右下左
    padding
    内边距 上右下左
    如果加了内边距,该元素会相应的变大
    border
    1px solid #60F 简写方式 第一个边框粗细 第二个边框样式 第三个边框颜色
    列表方块
    list-style
    none将列表前面的序号去掉
    list-style-image
    可以将前面的序号变为图片
    格式与布局
    位置
    position
    fixed固定
    相对于浏览器边框位置固定
    absolute绝对位置
    相对于父级元素(浏览器,绝对定位的上级)
    relative相对位置
    相对于自身应该出现的位置
    top
    距离上边的距离
    right
    距离右边的距离
    bottom
    距离下边的距离
    left
    距离左边的距离

    float
    left
    向左流
    right
    向右流
    clear
    both
    清掉流
    <div style="clear:both;"></div>
    z-index分层
    值越大越靠上
    其它
    display
    显示block和隐藏none,不占位置
    visibility
    显示visible和隐藏hidden,占位置
    overflow
    超出范围 hidden隐藏
    透明
    opacity:0.5;-moz-opacity:0.5;filter:alpha(opacity=50)
    圆角
    border-radius:5px;
    阴影
    box-shadow:0 0 5px white;

  • 相关阅读:
    软件测试面试技巧-面试问题大全
    软件测试--实际项目的实际操作过程--免费资料
    知乎问:小白转行学软件测试;能就业吗?
    软件测试面试-如何高质量提交缺陷bug?
    如何自学软件测试--最真实的回答
    软件测试面试必问--bug交互流程
    苹果手机安装未上线App操作流程-实际公司-Dotest董浩
    Python自动化之下拉框,隐藏标签定位 代码&报错解决
    ​Linux环境下搭建禅道管理工具-包含软件资源
    Python自动化报错:IndentationError-unindent does not match any outer indentation level
  • 原文地址:https://www.cnblogs.com/skyhorseyk/p/6854080.html
Copyright © 2011-2022 走看看