HTML与CSS笔记-1

HTML

图片语义化

1.alt属性与tittle属性。

2.figure元素与figcaption元素。

表单分组

fieldset标签、legend标签

优点：1.增强表单语义
     2.可定义fieldset元素的disabled属性来禁用整个组的表单元素

其他

• br：只适合用于p标签内换行
• del标签、ins标签：定义删除和更新后的文本
• img标签：
  • 图片作为HTML一部分，想被搜索引擎识别，应使用img
  • 反之，应使用背景图片

CSS

CSS单位

• 绝对单位：cm\mm\in\pt\pc 多用于平面印刷
• 相对单位：
  • px
  • % ：
    • width height font-size相对于父元素『相同属性』的值来计算
    • line-height相对于父元素font-size值来计算
    • vertical-align相对于当前元素的line-height值来计算
  • em ：
    • 当前元素的font-size的px值，如果当前元素font-size未定义，会继承父元素
    • 浏览器默认font-size为16px
    • 小技巧：首行缩进text-indent: 2em;
  • rem:

CSS特性

• 具有继承性的属性有三大类
  1. 文本相关：font-family font-size font-style font-weight font
     line-height texxt-align text-indent word-apacing
  2. 列表相关属性：list-sytle-image list-sytle-position list-sytle-type
     list-style
  3. 颜色：color
     • a标签默认颜色样式优先级更高，不会继承父元素颜色样式

CSS优先级

应用方式冲突

行内样式 > (内部样式 = 外部样式)

继承方式冲突

最近的祖元素获胜

指定样式冲突

样式权值高获胜，权值只针对指定样式，不用于继承

• 通配符 0
• 伪元素 元素选择器 1
  • 伪元素只有四个：
    • ::before 、::after 、 ::first-letter 、::first-line
• class选择器 伪类 属性选择器 10
• id选择器 100
• 行内样式 1000

继承样式和指定样式冲突

指定样式获胜

!important

会覆盖任何其他样式

CSS选择器

• 层次选择器
  • M N 后代选择器，选择M元素内部后代所有N元素
  • M>N 子代选择器，选择M元素内部子代所有N元素
  • M~N 兄弟选择器，选择M元素后所有同级N元素
  • M+N 相邻选择器，选择M元素相邻的下一个元素N
    • 技巧：li元素之间添加一横线

      li+li{border-top:1px solid red;}
      /*最后一个li元素没有相邻，没有可选去的*/
      

CSS规范

CSS命名规范（适用于开发阶段，发布阶段css文件都合并压缩）

1. CSS文件命名
   • reset.css重置样式，清除默认样式
   • global.css全局样式，定义公共、基础样式（导航、底部、全局字体、文字颜色）
   • themes.css主题样式
   • module.css模块样式
   • masster.css模板样式，用于母版页的样式
   • columns.css专栏样式
   • forms.css表单样式
   • mend.css补丁样式
   • print.css 打印样式
2. id和class命名
   • 避免class命名重复，命名取父元素class名为前缀
   • 页面常见部分命名规范

网页主体部分命名

网页部分	命名
最外层	wrapper
头部	header
内容	content
侧栏	sidebar
栏目	column
热点	hot
新闻	news
下载	download
标志	logo
导航条	nav
主体	main
左侧	main-left
右侧	main-right
底部	footer
友情链接	friendlink
加入我们	joinus
版权	copyright
服务	service
登录	login
注册	register

网页细节部分命名

导航命名

网页部分	命名
主导航	main-nav
子导航	sub-nav
边导航	side-nav
左导航	leftside-nav
右导航	rightside-nav
顶导航	top-nav

其他

网页部分	命名
菜单	menu
子菜单	submenu
标题	title
摘要	summary
登录条	loginbar
搜索	search
标签页	tab
广告	banner
小技巧	tips
图标	icon
法律声明	siteinfolegal
网站地图	sitemap
首页	homepage
子页	subpage
合作伙伴	parter
帮助	help
指南	guide
滚动	scroll
提示信息	msg
投票	vote
相关文章	related
文章列表	list

书写规范

CSS属性书写顺序
1.影响文档布局属性	display; position; float; clear; ...
2.自身盒模型属性	width; height; padding; margin; border; overflow; ...
3.文本属性	font; line-height; text-align; text-indent; vertical-align;...
4.装饰属性	color; background-color; opacity; cursor;...
5.其他属性	content; list-style; quotes;...

#main {
    /*影响文档流属性*/
    display             : inline-block    ;
    position            : absolute        ;
    top                 : 0               ;
    left                : 0               ;

    /*盒子模型属性*/
    width               : 100px           ;
    height              : 100px           ;
    border              : 1px solid gray  ;

    /*文本属性*/
    font-size           : 15px            ;
    font-weight         : bold            ;
    text-indent         : 2em             ;

    /*装饰属性*/
    color               : #000            ;
    background-color    : #fff            ;

    /*其他属性*/
    cursor              : pointer         ;
}

功能代码

具有某一特殊功能的代码块应该集中放置一起

#main {

    /*单行文本居中方法需要使用2个属性实现，就将其写在一起*/
    height              : 50px              ;
    line-height         : 50px              ;

}

注释规范

1. 顶部注释

/*
    *@sescription:  文件说明
    *@author     :  作者
    *@update     :  更新时间
*/

2. 模块注释

/*导航部分，开始*/
...
/*导航部分，结束*/

3. 防止代码压缩删除注释，将需要保留的注释加 ! 符号

/*! 这条注释不会被压缩删掉 */

CSS reset

重置浏览器默认的CSS样式

• 避免使用*{...}，性能底下，需更具个人具体需求定义。

CSS盒子模型

1. 内容区
   • width
   • height
   • overflow
2. 内边距
   • padding-top
   • padding-right
   • padding-bottom
   • padding-left
3. 边框
   • border-width
   • border-style
   • border-color
4. 外边距
   • margin-top
   • margin-right
   • margin-bottom
   • margin-left
   • margin可指定负数，盒子向负值相反方向移动

border

border:0和border:none差异

• border : 0
  • 0px虽然看不见，但是浏览器还是会渲染，占内存
• border : none
  • 不占内存

padding

margin

外边距叠加

初衷是为了对文章更好排班，第一段外边距显示和其他段落外边距相等。

1. 同级元素
   • 会发生合并
2. 父子元素
   • 当父元素没有padding、border把外边距分隔开，父元素和子元素相邻上下外边距会合并
3. 空元素
   • 自身没有padding、border把外边距分隔开，上下外边距会叠加，再碰到其他元素外边距再次叠加

负margin

1. margin-top、margin-left为负时，当前元素拉向指定方向
2. margin-botton、marin-right为负时，后续元素拉向指定方向

负margin使用技巧

• 图片文字居中
  • vertical-align : text-bootom
  • img{margin: 0 3px -3px 0 ;}
• 自适应两列布局

   
主体，宽度自适应
   
侧边栏，固定宽度


   div{
       float: left;
   }

   .content{
       width: 100%;
       /* 将sidebar向左拉sidebar自身宽度的举例*/
       /*否则sidebar会被content的width百分百挤到下一行 */
       margin-right: -200px;
       background-color: green;
   }
   .content > p{
       /* 防止浏览器宽度不足，两列发生重叠 */
       /* siderbar自身宽度+两列间距10px */
       margin-right: 210px;
   }

   .sidebar{
       width: 200px;
       background-color: red;
   }

• 元素垂直居中
  1. 父元素position: relative;
  2. 需垂直居中元素
     • position: absolute;
     • top: 50%;
     • left: 50%;
     • margin-top: /* height 的一半 */
     • margin-left: /* width 的一半 */
• tab选项标签
  • margin-top: -1px; 解决tab切换问题。

overflow

display

inline行内元素

无法定义height、width,
无法定义margin-top、margin-bottom.
不能容纳block块元素

inline-block行内块元素

可定义height、width
可与其他inline行内元素同行

常见inline-block元素

• img
• input

display: none ;

与visibility: hidden;的区别

• display: none隐藏，不占据原来位置
• visibility: hidden隐藏，原来位置保留

display: table-cell ;

可以让元素以表格单元形式呈现

1. 大小不固定的图片垂直居中于元素

父元素{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
子元素{
    vertical-align: middle;
}

2. 等高布局
3. 自动平均划分元素

父元素{display: tabel ;}
子元素{display: table-cell ;}

去除inline-block元素间距

父元素{font-size: 0 ;}