zoukankan      html  css  js  c++  java
  • 0312-css样式(选择器、文本text、字体fonts、背景background)

    问题:

    1.css中table{border:1px;}是定义table的样式,只有表格的外边框,不能实现<table border="1"></table>(单元格边框)的效果。

      通过css设置表格(单元格)边框的代码示例:

     1 /*方法一:通过设置td边距实现效果*/
     2 table{
     3     border-collapse: collapse;
     4 }
     5 td{
     6     border:1px solid #ccc;
     7 }
     8 /*通过table和td的背景颜色设置边框*/
     9 table{
    10     background:red;
    11 }
    12 td{
    13     background: #FFFFFF;
    14     border-spacing: 1px;
    15 }
    View Code

    2.在设置多个父级div,内嵌多个浮动子级div时,没有对父级div设置高度,导致位置错乱。

    3.对列表标签ul/ol设置list-style-position:inside,可使列表前缀在li里面,方便加边框等样式。

    4.同一标签,同时有id选择器和class选择器,class在上,id在下定义相同样式时为id样式;id在上,class在下时同样为id样式。--id优先级大于class

    5.代码管理,文件类型要分开

    6.id和class起名字注意命名规范:字母数字下划线,数字不能开头

    7.文件名不要是中文

    内容整理:

    关于css:

      css注释:/*注释内容 */

      内联(行内):写在标签里面,以属性的形式,属性名是style。  //优先级最高,不推荐。

      内嵌:写在head标签内,以标签的形式,标签名是style。   //写法:选择器{ 样式 } 

      外部:写在head标签内,以标签的形式,标签名是link

        <link rel="stylesheet" href="*.css" />

    选择器:

      标签选择器:根据标签名找  //p{}  div{}

      id选择器:根据id的属性值来找元素  //id的属性值   #id

      class选择器:根据class的属性值来找元素  //class的属性值  .class

      并列:选择器1,选择器2{}  //关键符号  ,

      后代:父选择器 子选择器  //关键符号 空格

      *{}:所有

    背景:background

      body{background:#fff url("img.img") no-repeat right top;}

      简写属性值的顺序:

      background-color:背景颜色

      background-image:背景图像

      background-repeat:背景图片的平铺  //水平、竖直、不平铺...

      background-attachment:背景图像随页面其他部分的滚动或固定  //默认scroll滚动

      background-position:背景图像的位置  //可设置px和百分比,默认先上下再左右,与边距的设置相反

      另外:background-size:背景图像的缩放

    文本:text

      color:文本颜色

      direction:文本方向  //横向/竖向

      letter-spacing:字符间距  //abc  a b c

      line-height:行高  //经常用来设置文本的垂直居中,最好对一行使用,如果有换行会影响标签高度

      text-align:文本的对齐方式  //居中,左对齐,右对齐,两端对齐

      text-decoration:修饰文本  //下划线(非链接文本不建议使用),上划线,删除线

      text-indent:首行缩进  //可设置px和em;2em=当前字号的两个字符

      text-shadow:文本阴影

      vertical-align:文本的垂直对齐  //top、middle、bottom

      word-spacing:设置字间距

    字体:fonts

      font-family:字体

      font-size:字号

      font-style:字体样式  //默认normal;italic:斜体;oblique:倾斜(字体没有斜体时浏览器可仿oblique实现效果)

      font-weight:字体的粗细  //实现<b></b>的效果,100-700

  • 相关阅读:
    小程序配置 全局配置
    浅谈 Nginx和LVS的各种优缺点
    LVS负载均衡(LVS简介、三种工作模式、十种调度算法)
    用Camshift算法对指定目标进行跟踪
    AsyncTask源代码解析
    shell中的${},##和%%的使用
    hdu 1081 &amp; poj 1050 To The Max(最大和的子矩阵)
    POJ 1141 Brackets Sequence (区间DP)
    Ejb in action(六)——拦截器
    7.JAVA编程思想笔记隐藏实施过程
  • 原文地址:https://www.cnblogs.com/flypea93/p/8550865.html
Copyright © 2011-2022 走看看