博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
第三课 css样式
阅读量:6690 次
发布时间:2019-06-25

本文共 1911 字,大约阅读时间需要 6 分钟。

课前提问及答案】

1、table有哪些属性:width、height、border、cellspacing、cellpadding、bordercolor、bgcolor、align

            宽   高   边框  内框宽度  文字到边框距离 边框颜色  背景色 水平位置

2、body有哪些属性:bgcolor、background、text

          背景颜色  背景图片 文字颜色

---------------------------------------------------------------------------------------------------------------

 

1、css选择器:相当于一个标识,有3种选择器

  第一种选择器:标签选择器      body{};  p{ color:red;};  table{};  div{};  li{};  ol{};  ul{}; 

     第二种选择器:class类选择器   .c1{ color:green;}   可被多次调用

  第三种选择器:id选择器      #d1{ color:blue;}    独有
  优先级:标签 < class < id

  注意:一个标签可以有多个class,但是只能有一个id

2、css文字效果:

  字体:font-family

  字号:font-size
  颜色:color
  粗体:font-weight
  下划线:text-decoration:underline ( 删除线:line-through; 顶划线:overline; 去掉下划线:none )
  英文首字母大写:text-transform:capitalize(全部大写:uppercase;全部小写:lowercase)
  字母间距:letter-spacing
  水平位置:text-align

 

  居中:

    水平居中:text-align:center

    垂直居中:line-height:300px;(和文字所在的div的高度一样)

3、css继承性:

  #d1 p 表示id为d1的标签下面的p标签

  #d1,p 表示id等于d1的标签和p标签

  注意:css具有继承性,只有字体相关的css属才能够被继承 (面试常问)

4、表格边框:
              样式 粗细 颜色
  border: solid 1px red;

  等同于下面3句话:

  边框样式:border-style:solid;(实线:solid;虚线:dashed;点划线:dotted)

  边框粗细:border-width:1px;
  边框颜色:border-color:red;

 

5、表格样式:

  1)表格标题:<caption>  属性:caption-side:bottom; (标题位于表格下方)

  2)边框重叠:border-collapse:collapse;(表格间隙合并)

  3)行列表头:th scope=”row” (行的表头)  th srope=”col” (列的表头)

 

6、背景:

  背景颜色:background-color:#00FF00;

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

  (注意:当图片的的大小,小于它所在的div时,图片会横向、纵向填满div)

  背景重复:background-repeat:no-repeat;(不重复:no-repeat;横向重复:repeat-x;纵向重复:repeat-y)

  背景方位:background-position:5px 10px;(左边、上边)

  背景固定:Background-attachment:fixed;

  综合:

    background:blue url(xx.jpg) no-repeat fixed 5px 10px;

  

7、超链接:

  1)去掉超链接下划线:text-decoration:none;

  2)效果:

    a:link    正常浏览状态的样式

    a:visited   被点击过的超链接样式

    a:hover    鼠标经过时的样式

           a:avtive        点击那一刻的样式

           LoVe HAte 原则:即按照上面四个从上到下的顺序才有相应的效果

  3)鼠标经过时手指:cursor:pointer;

转载于:https://www.cnblogs.com/mmtk/p/4669395.html

你可能感兴趣的文章
I/O完成端口、异步I/O、APC和线程池(四)——线程池
查看>>
获取Java程序运行的路径 | 获取当前jar包的路径
查看>>
摆脱京城贵妇unittest的骚套路discover,自定义用例执行顺序。
查看>>
MYSQL
查看>>
jQuery验证控件jquery.validate.js使用说明+中文API
查看>>
Uploadify自定义提示信息
查看>>
R语言可视化--颜色
查看>>
源码安装干净卸载方式
查看>>
java 获取当月第一天和最后一天 获取前一个月第一天和最后一天
查看>>
selenium IDE安装
查看>>
u3d工作中解决问题记录
查看>>
String to Integer (atoi)
查看>>
一、cent OS安装配置JDK
查看>>
DWARF 中的 Debug Info 格式
查看>>
Valid Sudoku
查看>>
启用事务注解
查看>>
【转】springmvc源码分析链接
查看>>
2.VO类
查看>>
数据迁移 (选做)
查看>>
windows8忘记密码登陆不了解决办法
查看>>