zoukankan      html  css  js  c++  java
  • 第一周复习二 (CSS样式表及其属性)

    样式表三种写法

    1内联写法:style直接写在标签内。个人感觉多用于个别标签,一般情况优先级较高

    style="font-size:16px;"

    2内嵌写法:写在<head></head>标签内。个人感觉多用于较多或通用的一类标签,用来减少工作量

    <style type="text/css">

    {}

    </style>

    分为三种:

    标签选择器

    <style type="text/css">

        标签名(类如div){ }

    </style>

    类选择器

    <style type="text/css">

        .class{}

    </style>

    id选择器

    <style type="text/css">

        #id{ }

    </style>

    特别的

    *表示对所有元素起作用

    <style type="text/css">

        *{

            }

    </style>

    三种复合选择器

    并列,用,

    <style type="text/css">

        标签名,#id{

            }

    </style>

    子代,用空格

    <style type="text/css">

        table td{

            }

    </style>

    筛选,用.

    <style type="text/css">

        牌

    p.sp{

            }

    </style>

    3外部样式表

    <Link rel="stylesheet" type=‘text/css‘"href=’’"/>

    这里用href

    常用属性

    1· 背景与前景       

    background-color:;背景色,

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

     background-attachment:fixed; 背景固定

    background-repeat:no-repeat; 不平铺

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

    2字体  

    font-family:字体

    color:文字颜色

    font-size:18px; 字体大小(12px,14px,18px)

    font-weight:normal;bold加粗

    font-style:italic; 倾斜

    text-decoration:overline; 下划线

    text-align:center; (水平)居中对齐

    vertical-align:middle; (垂直)居中对齐;与行高同用

    line-height:行高

    3边界与边框

    border:5px solid red; 红色,5像素

    margin:50px; 外边框宽度50像素

    margin-top:50px; 上边外边框宽度50像素

    margin:20px 0px 20px 0px; 顺序:上右下左,时钟顺时针顺序

    padding:50px; 内间距50像素

    padding-top:50px; 内上边框50像素

    padding:50px 20px 10px 20px; 顺序为上右下左,时钟顺时针顺序

  • 相关阅读:
    Mysql必知必会
    KafKa简介和利用docker配置kafka集群及开发环境
    深入理解python
    性能测试报告模板
    Zookeeper的基本原理(zk架构、zk存储结构、watch机制、独立安装zk、集群间同步复制)
    Shell命令和流程控制[linux常用命令的使用]
    Javascrip之BOM
    分布式文件系统HDFS-部署和配置
    分布式计算框架-Spark(spark环境搭建、生态环境、运行架构)
    框架—Mybatis搭建
  • 原文地址:https://www.cnblogs.com/angangxiaofa/p/6711103.html
Copyright © 2011-2022 走看看