HTMLCSS 第三天 笔记
4:css 选择器的概念
Css要控制页面元素的显示形式,必须通过一定的方法,指定到该元素。
比如,
1:id选择器, 就是,给页面上的元素起一个不重复的id,
然后css, 通过 #id ,就能控制该元素。
这个概念称为css选择器。
类选择器:
用法: 页面里有<class="类名">来声明类
Css里, 用点+类名来选择这一类的元素. 例: .className{}
标签选择器:
因为html有很多种标签,如h1,p,div ,img,这样标签在页面里构成很多元素.
css可以通过标签名来选定页面内标签对应的元素.
比如:
P{}, 会对页面里所有的P标签生效
Div{},img{} ,则会对页面里所有的div,img生效.
派生选择器
通过元素的上下级关系来进行选择,(像地区由大到小的选择一样)
比如:
#header img{
}
#header ul {
}
则意味着分别选中#header元素下面的所有img元素和ul元素.
群选择器
例如:
#header, .intro {}
则意味着, 括号内的css 同时对 #header, .intro 生效.
伪类选择器:
伪类选择器,选择不是某一种元素,而是某种元素的某种状态
对于链接,我们可以针对的4种状态来设置显示效果.
链接没被点击过 :link
链接被点击过 : visited
鼠标放在链接上 :hover
鼠标点击的瞬间 :active
顺序: l v, h, a
通配选择器: * {}, 通配页面上所有元素(效率低,用的较少)
5:Css 基本写法
选择器 {
属性:值;
}
üP: 段落
üH(1-6): 1-6号标题,文字越来越小
üPre: 保持源码的原样格式输出
有一些内容类型,是div是表达不出来的
比如 要求你在页面内
引入超链接,引入一幅图片,或者一个flash,或者一段视频
A 超链接,用法<a href ="" title="" target="">文字或图片</a>
Img 引入图片,用法<img src="xxx.gif" alt="图片的文字标签" title="提示文字" />
Flash
Wmv, 这两个标签,目前各种浏览器的引入方式不一样,
因此,相相对来说,兼容性较好的引入代码如下:
<object type="application/x-shockwave-flash" data="88.swf" width="400" height="300">
<param name="movie" value="88.swf" />
</object>
<object classid="clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6" width="400" height="300">
<param name="autoStart" value="false" />
<param name="URL" value="php.wmv" />
<embed autostart="true" src="php.wmv" type="video/x-ms-wmv" width="400" height="300" controls="ImageWindow" console="cons"> </embed>
</object>
ul无序列表,ol有序列表
有序列表与无序列表 (都是块状元素)
<ul>
<li>这是列表项</li>
</ul>
<ol>
<li>这是有序列表项</li>
</ol>
通过css能控制列表的3个属性:
List-style-type : 列表项的显示标志
List-style-image: 用于替换显示标志的图片.
List-style-postion:inside/outside ,显示标志与列表内容的位置关系
注意:
虽然列表有3种属性,可以方便设置,
但是,我们实际使用中,往往把list-style-type设为none;
原因是:不同浏览器对于列表的渲染差别很大,
因此要通过css初始化,强制他们保持一致.
基本语法:(以3行2列为例)
<table>
<tr><td> </td><td> </td></tr>
<tr><td> </td><td> </td></tr>
<tr><td> </td><td> </td></tr>
</table>
CSS属性控制:
对于table:
Border-collapse: 边框是否融合.
可选值: separate(表格与表格相互独立的边框,默认值)
Collapse,(表格之间的边框共用).
Border-spacing: 边框间距
用法: border-spaing: xpx ypx (给两个像素值,分别代表单元格在x,y轴的距离)
Empty-cells: 空表格是否显示.
可选值: hide, show ,默认是hide
注意:如果border-collapse值为collapse时, border-spacing,和empty-cells自动失效.
想让空表格显示的处理方式:
1:在空单元格里加一个空白符" ";
2:让表格边框融合collapse
合并列,合并行的小技巧
1、先把合并后,要消失的td删除掉
2、数一数留下的td要跨几行,或几列
3、再通过rowspan="N",或者colspan="N"
表格的适用范围:
显示格式化数据
不适用于页面布局
转载于:https://www.cnblogs.com/cnmice/archive/2013/03/08/2949754.html
HTMLCSS 第三天 笔记相关推荐
- 印象笔记打开错误_只会用手机自带便签?这三款笔记软件分分钟秒杀
原创文 | 文艺旁·点击上方收听音频 正文共:2555字 16图 预计阅读时间:7分钟 手机自带便签的唯一优点在于打开迅速,但整理大量文件,多设备同步就非常不方便了. 第三方笔记软件优点: 多级 ...
- 安卓第三天笔记--通知-进度条-时期
安卓第三天笔记--通知-进度条-时期 1.通知Notification 通知就是在是上方的状态栏弹出通知消息 <RelativeLayout xmlns:android="http:/ ...
- python数据分析的交叉分析和分组分析 -第三次笔记
python数据分析 -第三次笔记 –1.交叉分析 –2.分组分析 1.交叉分析 交叉分析的含义是在纵向分析法和横向分析法的基础上,从交叉.立体的角度出发,由浅入深.由低级到高级的一种分析方法.这种方 ...
- 琢石成器――windows环境下32位汇编语言程序设计(第三版)笔记
琢石成器――windows环境下32位汇编语言程序设计(第三版)笔记 2011年12月20日 基础篇 第1章 背景知识 1 1.1 Win32的软硬件平台 1.1.1 80x86系列处理器简史 1.1 ...
- 飞桨领航团AI达人创造营第三课笔记
第三课笔记目录 课后感慨 作业完成记录 制作数据集 训练模型 参考案例 代码解读 unzip git 数据集划分解读 文件选择 问题解决 链接指引 课后感慨 课程是越来越难了,有点难跟上了.但得益于群 ...
- 看雪学院-OllyDBG入门系列(三)笔记
原作地址:http://bbs.pediy.com/showthread.php?threadid=21330 作者:CCDebuger 看雪学院-OllyDBG入门系列(三)笔记 这样的编辑框中输注 ...
- 软考中级-网络工程师第三章笔记(广域通信网)
软考中级-网络工程师第三章笔记(广域通信网) 文章目录 软考中级-网络工程师第三章笔记(广域通信网) 前言 一.广域网概念和分类 二.公共交换电话网PSTN 三.公共数据网X.25 四.帧中继网FR ...
- 林崇德《发展心理学》第三版笔记和课后答案
完整版在线阅读>>> 林崇德<发展心理学>第三版笔记和课后答案 内容节选 第1章 绪 论 1.1 复习笔记 一.发展心理学的界说 (一)心理学与发展心理学 发展心理学是心 ...
- 阻塞和非阻塞、同步和异步的三篇笔记
学习node.js回调函数看到的关于阻塞非阻塞.同步异步讲解的很通俗易懂的三篇笔记,下面记录一下: 第一篇 阻塞和非阻塞,同步和异步是node.js里经常遇到的词汇,我举个简单的例子来说明: 我要看足 ...
最新文章
- 菜鸟的DUBBO进击之路(二):Dubbo初识
- 2012-5-3 线程和进程的区别
- python程序设计报告-20192116 实验一《Python程序设计》实验报告
- bug4 导入新工程时报 Target runtime com.genuitec.runtime.generic.jee60 is not defined
- cygwin编译verilator_Sublime text3 + Verilator 实现自动语法检错
- 注解_案例_简单的测试框架
- matlab机械臂工作空间代码_【ROS-Moveit!】机械臂控制探索(3)——基于python的API示例代码分析...
- 前端学习(1043):回车把数据存储到本地存储里面
- 2012 安装mysql 5.6_如何安装mysql server 5.6
- asc码转换 linux_Linux终端下将图片转换ASCII Art代码图案
- CVPR 2021 | 超越卷积的自注意力模型,谷歌、UC伯克利提出HaloNet
- 统计学(检验、分布)的 python(numpy/pandas/scipy) 实现
- pjsip代码分析(1)——modules框架
- Python根据歌曲id爬取网易云音乐歌词
- 嵌入式系统开发的模式与流程
- CTF 实验吧 天网管理系统
- Vue开发警告[Vue warn]: Avoid replacing instance root $data. Use nested data properties instead.
- 结构光、双目、ToF——三种3D技术对比
- 用Endnote在word中插入文献出现{Xu, 1997 #407}等样式的错误的解决方法如下
- python爬京东优惠券_京东抽奖爬虫LiteVersion
热门文章
- sshd_config 中文手册
- 数据库升级后,准备使用原有数据文件启动数据库
- Android基于Docker容器的双系统多开实现和自动化部署
- WebKit 分析–for android
- ABI(Application Binary Interface)
- QTP中对用户自定义环境变量的XML操作的几个函数
- JVM学习笔记之-JVM性能监控-JVM监控及诊断工具-命令行方式
- android中layout、drawable及styles的xml文件加载探索
- R-CNN(Rich feature hierarchies for accurate object detection and semantic segmentation)论文理解...
- Project Eular 634