• 第三章----CSS样式表综合整理


           样式表注释/**/

          1、样式表分类:

    1-1内联样式表      <div   style="font-size:15px;"></div>

    1-2内嵌样式表       写在<head>标签里,

    <style type="text/css">样式表内容</style>

    1-3 外部样式表    一般写样式表都会先有对全局的样式

    *

    {}

    <link rel="stylesheet" type="text/css" href="XXX.css"-->引入外部样式表

    2、选择器:

    标签选择器p{}

    class选择器 class="main"   .main{}

    id选择器   id="main"     #main{}

    用”,“隔开表示并列     .main,#main表示两者具有同样的样式

    用空格隔开,表示后代    .main p表示class为main的标签里p标签使用该格式

    p.sp在p中class="sp"的标签执行以下样式

    3、样式的属性

    3-1:背景与前景

    background-color:   背景色

    background-image:url(路径)          设置背景图片

    background-attachment:fixed       背景是固定的

    background-attachment:scroll       背景随字体滚动

    background-repeat:no-repeat       /*no-repeat不平铺;repeat平铺;repeat-x横向平铺;repeat-y纵向平铺*/

    background-position:center           /*背景图居中,设置背景图位置时,repeat必须为“no-repeat"*/

    background-position:right  top      /*背景图放到右上角,其他同理*/

    background-position:left 100px top 200px;        /*离左边100像素,离上边200像素*/

    font-famliy:"宋体”

    font-size:12px;              /*还可以用em,2.5em,就是默认字体的2.5倍

    font-weight:bold           /*加粗

    font-style:italic;            /*倾斜,normal是不倾斜

    color:           字体颜色

    text-decoration:underline;      /*下划线,overline是上划线,line-through是删除线,none是去掉下划线

    text-align:center;                 /*居中

    vartical-align:middle;           /*居中,top顶对齐,bottom底

    text-indent:px;           首行缩进

    line-height:             /*行高

    display:none;           /*不显示,inline-block。显示为块,不自动换行,宽高可设;block,显示为块,自动换行;inline,效果同span标签,不自动换行,宽高不可设。

    visibility:hidden;        /*可视性,隐藏但是占空间,visible,显示

    3-2 边界和边框

    border-top:5px solid blue;          上边框。。。

    margin:20px 0px 20px 0px;             /*上右下左

    padding同理

    3-3 列表和方块

    list-style:none;       /*取消序号

    list-circle;           /序号变为圆圈

    list-style-image:url(图片地址)

    list-style-position:outside;             /序号在内容外

    list-style-position:inside;        /序号跟内容一起

    3-4  格式与布局

    position:fixed     锁定位置,一直处于页面的某个位置不变

    absolute          外层没有absolute,则相对于浏览器定位,外层有,则相对于外层边框定位

    relative            相对于默认位置移动

    分层   z-index在z轴分层,用于内容的覆盖

    overflow:hidden;    //超出部分隐藏,scroll,显示出滚动条

    <div style="clear:both"></div>截断流     截断流之后不遵循流式布局

    cursor:pointer     鼠标指上去显示小手

    <div  class="box"></div>

    .box{

    opacity:0.5;-moz-opacity:0.5;filter:alpaha(opacity=50)

    }                 /*调节透明度

  • 相关阅读:
    第六周学习进度条
    软件工程结对作业01---返回一个整数数组中最大子数组的和
    第五周学习进度条
    第四周学习进度条
    浅谈欧几里得算法求最大公约数(GCD)的原理及简单应用
    解析 static auto x = []() { std::ios::sync_with_stdio(false);std::cin.tie(nullptr);return 0;}()
    linux下Qt5 编译出现cannot find -IGL问题修复
    关于AD10如何输出自己想要的BOM表
    什么是Ajax
    selenium 安装与 chromedriver安装
  • 原文地址:https://www.cnblogs.com/yuanlaihenkuang/p/6728601.html
Copyright © 2020-2023  润新知