2015.7.8 第三课 课程重点(css样式)

课前提问及答案】

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

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

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

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

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

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

  第一种选择器:标签选择器     p{ color:red;}
  第二种选择器: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    鼠标经过时的样式

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

时间: 2024-10-27 07:09:46

2015.7.8 第三课 课程重点(css样式)的相关文章

2015.7.8 第三课 课程重点

1.css选择器:相当于一个标识,有3种选择器 第一种选择器:标签选择器 p{ color:red;} 第二种选择器:class选择器 .c1{ color:green;} 可被多次调用 第三种选择器:id选择器 #d1{ color:blue;} 独有 优先级:标签<class<id 注意:一个标签可以有多个class,但是只能有一个id 2.css文字效果: 字体:font-family 字号:font-size 颜色:color 粗体:font-weight 下划线:text-decor

2015.7.22 第十一课 课程重点(jq:元素获取、添加、删除、过滤、判断、遍历、取值,样式设置、改变对象、切换、判断)

1.获取元素: 1).size(): 获取元素的个数. $(“img”).size():获取有多少个img. 2).eq():获取元素. $(“img[title]”).eq(1):获取第二个带有title属性的img标签. 也可以写作: $(“img[title]”)[1],此括号里的1代表索引1,所以是对应第二个,一般多用eq(). 3).get() :获得由选择器指定的DOM元素. x=$("p").get(0):获取第一个 p 元素的值. 4)index():获取某项标签的索引

2015.7.17 第八课 课程重点(js语句:条件、循环)

1.条件语句: (1)比较操作符: ==:判断是否相等 !=:判断是否不相等 > :判断是否大于 >=:判断是否大于等于 < :判断是否小于 <=:判断是否小于等于 [例1] if(iNum1==iNum2) //如果iNum1与iNum2相等 { iNum3=iNum1; //将iNum1的值赋给iNum3 } else{  //否则 iNum3=iNum2;  //将iNum2的值赋给iNum3 } [补充]以上也可写作: iNum3 = iNum1==iNum2 ? iNum

2015.7.9 第四课 课程重点(浮动、盒子模型、绝对/相对定位)

1.块级元素的特点: (1)块级元素里面的内容,或者背景图片,默认显示在块的左上角 (2)块级元素,默认情况下,单独占满一行. 常用的块级元素:div.p.h1-h6.hr.ul li.ol li.table.body... 2.浮动:float 作用:通过漂浮,让块级元素实现并排 float:left 或 right 注意:如果div左边或者右边的块存在浮动,会对此div产生影响,此时需要清除左右方的浮动 清除浮动:clear:left(清除左边div的浮动)或right(清除右边div的浮动

2015.7.20 第十课 课程重点(jq选择器:id、类、标签、特殊、属性、包含、位置、过滤)

1.在VS中新建jq项目: 新建web窗体时选择第二个: 将系统生成的多余文件夹删掉,仅留下Scripts和Web.config: 将Scripts文件夹改名为我们熟悉的js(也可以不改,仅推荐改),并新建文件夹css和image,并在对应位置添加页面,html.css.js 将上图鼠标所指的.min.js文件拖动到html中,将自己新建的js文件拖动到它下方,如图: *两者上下位置关系千万别弄饭了,min.js一定要在最上面. 将Script文件夹中的第一个js文件(_references.j

2015.7.14 第六课 课程重点(仿站及常见代码用法)

1.网站常见小图标调用方式: 将所有小图标做在一张大图上a.png,然后根据横纵轴来调用. background:url("a.png") -23px -70px no-repeat; 2.块级元素居中的常见写法: margin:0px auto; 3.如何让超链接影响到整个块? 将行内元素变成块级元素:display:block 4.文本框只留下面一条线: { border-width:0px;  border-bottom:solid 1px #000; } 5.仿站: 用所学知识

2015.7.13 第五课 课程重点(z-index、overflow、浏览器兼容性)

1.z-index=数字 z轴的值,当几个div重叠时,z-index数字越大的,越在上面 2.overflow:hidden(超过部分隐藏)/auto(超过时出现滚动框)/scroll(一直有滚动条) 3.浏览器兼容性问题: (1)兼容性问题:不同的浏览器基于不同的内核,对一些前端代码支持不一样,导致显示效果不一样 (2)测试的各大浏览器:IE7-IE11(可使用IETester,不考虑IE6).Opera.Safari.Chrome.Firefox (3)关于兼容性非常好的介绍文章:http

2015.7.15 第七课 课程重点(js、声明变量、数据类型)

1.vs新建步骤 文件——新建项目——web——空白web应用程序——取名.位置.确定——此时软件会自动生成一个sln文件(解决方案),一解决方案下面可以有多个项目. 点击项目——新建文件夹css和js和image——新建html页面取名demo1 (推荐设置:工具——选项——可以设置下字体和颜色:文本编辑器——把常用的几种语言设上行号颜色提示) 2.什么是js JavaScript是一种脚本语言,结构简单,使用方便,其代码可以直接放入HTML文档中,可以直接在支持JavaScript的浏览器中

2015.7.6 第一课 课程重点(html、列表、表格、相对路径、超链接)

2015.7.6 第一课 课程重点(html.列表.表格.相对路径.超链接) 1.html(超文本标记语言)结构: <html> <head> <title>标题</title> </head> <body> 主体 </body></html> 2.版面控制标记: 换行:<br/> 段落:<p></p> 水平线:<hr> (  粗细: size: 宽度:width