• CSS基础(二)


    一、css背景
    css背景属性用于定义HTML元素的背景
    背景效果(属性顺序):
    - background-color:设置元素的背景元素
    - background-image:设置背景图片
    - background-repeat:设置背景图像是否及如何重复
    - background-attachment:背景图像是否固定或者随着页面的其余部分滚动
    - background-position:设置图像的起始位置(定位)
    1. 背景颜色
    background-color属性定义了元素的的背景颜色
    CSS中,颜色值通常以以下方式定义:
    十六进制 - 如:"#ff0000"
    RGB - 如:"rgb(255,0,0)"
    颜色名称 - 如:"red"
    2. 背景图像
    background-image属性描述了元素的背景图像
    默认情况下,背景图像进行平铺重复显示,以覆盖整个元素实体
    body {background-image:url('paper.gif');}
    设置图像只在水平方向平铺(repeat-x)
    body
    {
    background-image:url('gradient2.png');
    background-repeat:repeat-x;
    }
    background-repeat属性可以设置背景图像是否平铺
    background-position属性可以给背景图像定位
    body
    {
    background-image:url('img.png');
    /*设置为不平铺*/
    background-repeat:no-repeat;
    /*定位:右  上*/
    background-position:right top;
    }
    3. 简写属性
    在以上实例中我们可以看到页面的背景颜色通过了很多的属性来控制。
    为了简化这些属性的代码,我们可以将这些属性合并在同一个属性中.
    背景颜色的简写属性为 "background":
    body
    {
       background:#ffffff url('img.png') no-repeat right top;
       margin-right:200px;
    }
    二、CSS文本
    1. 文本颜色
    颜色属性被用来设置文字的颜色
    body {color:red;}
    h1 {color:#00ff00;}
    h2 {color:rgb(255,0,0);}
    2. 对齐方式
    文本排列属性是用来设置文本的水平对齐方式
    文本可居中或者对齐到左或右,两端对齐
    当text-align设置为“justify”,每一行被展开为宽度相等,左、右外边距是对齐的
    h1 {text-align:center;}
    p.date {text-align:right;}
    p.main {text-align:justify;}
    3. 文本修饰
    text-decoration属性用来设置或删除文本的装饰(主要用来删除链接得下划线)
    a {text-decoration:none;}
    当然也可以用来装饰文字,但是不建议强调指出不是链接得文本,容易混淆
    h1 {text-decoration:overline;}
    h2 {text-decoration:line-through;}
    h3 {text-decoration:underline;}
    4. 文本转换
    文本转换属性是用来指定在一个文本中的大写和小写字母
    可用于所有字句变成大写或小写字母,或每个单词的首字母大写
    <style>
    /*全部大写*/
    p.uppercase {text-transform:uppercase;}
    /*全部小写*/
    p.lowercase {text-transform:lowercase;}
    /*首字母大写*/
    p.capitalize {text-transform:capitalize;}
    </style>
    <body>
    <p class="uppercase">This is some text.</p>
    <p class="lowercase">This is some text.</p>
    <p class="capitalize">This is some text.</p>
    </body>
    5. 文本缩进
    用来指定文本的第一行缩进
    p {text-indent:50px;}
    6. 所有CSS文本属性
    属性 描述
    color
    设置文本颜色
    direction
    设置文本方向
    letter-spacing
    设置字符间隔
    line-height
    设置行高
    text-align
    对齐元素中的文本
    text-decoration
    向文本添加修饰
    text-indent
    缩进元素中文本的首行
    text-shadow
    设置文本阴影
    text-transform
    控制元素中的zimu
    unicode-bidi
    设置或返回文本是否被重写
    vertical-align
    设置元素的垂直对齐
    white-space
    设置元素中空白的处理方式
    word-spacing
    设置字间距
    三、CSS字体
    CSS字体属性定义字体、加粗、大小、文字样式。
    1. 字体系列
    font-family 属性设置文本的字体系列,在使用的时候我们应当设置几个字体名称作为一种"后备"机制,如果浏览器不支持第一种字体,将会尝试下一种。
    注意: 如果字体系列的名称超过一个字,它必须用引号,如Font Family:"宋体"。
    多个字体系列是用一个逗号分隔指明:
    p{font-family:"Times New Roman", Times, serif;}
    2. 字体样式
    主要是用于指定斜体文字的字体样式属性。
    这个属性有三个值:
    - 正常 - 正常显示文本
    - 斜体 - 以斜体字显示的文字
    - 倾斜的文字 - 文字向一边倾斜(和斜体非常类似,但不太支持)
    /*正常*/
    p{font-style:normal;}
    /*斜体*/
    p{font-style:italic;}
    /*倾斜的文字*/
    p{font-style:oblique;}
    3. 字体大小
    font-size 属性设置文本的大小
    字体大小的值可以是绝对或相对大小
    绝对大小:
    - 设置一个指定大小的文本
    - 不允许用户在所有浏览器中改变文本大小
    - 确定了输入的物理尺寸时绝对大小很有用
    相对大小:
    - 相对于周围的元素来设置大小
    - 允许用户在浏览器中改变字体大小
    默认:如果不指定一个字体的大小,默认和普通文本段落一样,是16像素(16px=1em)
    px和em:
    /*px*/
    h1 {font-size:40px;}
    h2 {font-size:30px;}
    p {font-size:14px;}
    /*em*/
    h1 {font-size:2.5em;} /* 40px/16=2.5em */
    h2 {font-size:1.875em;} /* 30px/16=1.875em */
    p {font-size:0.875em;} /* 14px/16=0.875em */
    px设置可以通过浏览器的缩放工具调整文本大小,但是,这种调整是整个页面,而不仅仅是文本
    em设置可以在所有浏览器中调整文本大小(IE有偏差)
    百分比和em:
    在所有浏览器的解决方案中,设置<body>元素的默认字体大小是百分比:
    body {font-size:100%;}
    h1 {font-size:2.5em;}
    h2 {font-size:1.875em;}
    p {font-size:0.875em;}
    在所有浏览器中,可以显示相同的文本大小,并允许所有浏览器缩放文本的大小。
    4. 所有CSS字体属性
    属性
    描述
    font
    在一个声明中设置所有的字体属性
    font-family
    指定文本字体系列
    font-size
    指定文本的字体大小
    font-style
    指定文本的字体样式
    font-variant
    以小型大写字体或者正常字体显示文本
    font-weight
    指定字体的粗细
     
  • 相关阅读:
    springboot跨域解决
    python实现LRUCache
    oracle整库统计库表数据量--存储过程
    oracle整库统计库表各个字段数据最大长度--存储过程
    mysql数据库初始化脚本分组批量执行
    maven profile 的作用
    配置中包含maven属性,在idea中本地启动无法正常获取配置
    个人随笔
    Java接口interface field及method
    如何将.net core项目部署到IIS上?
  • 原文地址:https://www.cnblogs.com/jiumo/p/9744547.html
Copyright © 2020-2023  润新知