HTML+CSS学习

HTML+CSS学习

标签： HTML学习

---

目录

[TOC]

html总结

a frameset ul ol dl table p div pre br hr h1-h6 
b_i_u_del font img form button select textarea iframe

form:

action method name target enctype="multipart/form-data"
fieldset legend input

input type属性：

button checkbox file hidden image password radio reset submit text

input 其他常用属性:

name alt checked disabled value readonly maxlength

常用字符实体：

 <>&copy

css总结

三种声明方式：内联、内部、外部

基本选择器：

*{} .className{} #idName{} elementName{} attrName{} group1, group2{}

属性选择器：

[attrName]{}：选取带有指定属性的元素
[attrName=value]{}：选取带有指定属性和值的元素
[attrName~=value]{}：选取包含指定词汇的元素，通常是以空格分隔的多个词汇
[attrName|=value]{}：选取带有以指定值开头的属性值的元素，该值必须是整个单词，通常#是中横杠划线分割的一个单词
[attrName^=value]{}：匹配属性值以指定值开头的每个元素
[attrName$=value]{}：匹配属性值以指定值结尾的每个元素
[attrName*=value]{}：匹配属性值中包含指定值的每个元素

组合选择器：

选择器1 选择器2{}：后代选择器（派生选择器）
选择器1>选择器2{}：子元素选择器
选择器1+选择器2{}：相邻兄弟选择器，可选择紧接在另一元素后的元素，且二者有相同父元素。
选择器1~选择器2{}：普通兄弟选择器，选择紧接在另一个元素后的元素，而且二者有相同的父元素。

常用属性

• background: background-color background-image/background-repeat
• 文字装饰： color/text-align/text-decoration/text-indent
• font: font-family/font-size/font-style/font-weight
• list-style: list-style-type/list-style-position/list-style-image
• border: border-width/border-style/border-color/border-collapse/border-spacing
• padding: padding-top/padding-left/padding-right/padding-bottom
• margin: margin-top/margin-left/margin-right/margin-bottom
• align: left/center/right
• vertical-align: middle text-top 用当前元素的顶端与文本信息对齐 top 用当前元素的顶端与文本信息对齐 text-bottom 用当前元素的底部与文本信息对齐 bottom 用当前元素的底端与行内的父元素底端对齐
• display: none 不显示当前元素，同时元素所占的位置没有了 block 将当前元素设置了块级元素,可以设置高宽 inline 将当前元素设置为行内元素 inline-block 行内块级元素 list-item 将元素作为列表显示
• float: left/right
• clear: both/left/right
• overflow: visible(default) hidden 将其余部分隐藏 scroll 添加滚动条 auto 自动识别,若需要滚动条则添加,否则不添加
• position:relative 相对于自己的初始位置，原来的位置保留不变 top/right/bottom/left
• position:absolute 绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。绝对定位原来的位置不再保留 top/right/bottom/left
• 水平垂直居中： margin: auto auto;position: absolute;left: 0;right: 0;top: 0;bottom: 0;
• position:fixed fixed：表示固定定位， 与absolute定位类型类似， 但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。 由于视图本身是固定的， 它不会随浏览器窗口的滚动条滚动而变化， 除非你在屏幕中移动浏览器窗口的屏幕位置， 或改变浏览器窗口的显示大小 因此固定定位的元素会始终位于浏览器窗口内视图的某个位置， 不会受文档流动影响， 并且拖动滚动条时位置固定不变

样式继承

会继承外观样式（字体、颜色...）页面上的布局样式则不会被继承
若需要继承布局：属性后加inherit eg:border: inherit;	/*强制继承*/

伪元素选择器

elementName:before{
    content:
}
elementName:after{
    content:
}

tips:配合content使用

伪类选择器

设置超链接四种状态：

a:link{}/a:hover{}/a:active{}/a:visited{}

选取特定元素：

选择器：checked{}
选择器：empty{}
:root{}
选择器：first-child{}
选择器：last-child{}
选择器：only-child{}
input[type="text"]:enabled{}
input[type="text"]:disabled{}
input:not([type="submit"])

---

CSS3总结：

边框

圆角边框

实现圆形，前期是正方形的外切容器

width: 100px;
height: 100px;
border: 1px solid red;
/*内切圆半径是外切容器长度的一半*/
/*border-radius: 50px;*/
border-radius: 50%;

实现椭圆形

width: 100px;
height: 200px;
border: 1px solid red;
/*内切圆半径:横轴半径是宽度的一半,纵轴半径是高度的一半*/
/*border-radius: 50px/100px;*/
border-radius: 50%;

任意弧形

height: 100px;
width: 100px;
border: 1px solid orange;
/*按顺时针方向依次设置*/
border-radius: 10px 20px 30px 100px;

边框阴影

width:200px;
height:80px;
background-color:orange;
box-shadow: 10px 10px 10px #888888;

背景

• 背景尺寸

/*通过像素值设置背景尺寸:宽度和高度*/
 background-size:63px 100px;
/*通过百分比设置背景尺寸,相对父元素的*/
background-size:100% 100%;
/*背景图片会全完覆盖容器的背景。把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。*/
background-size:cover;
/*表示背景图片会完整的展示。把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。*/
background-size:contain;
background-repeat: no-repeat;

• 背景定位 background-origin:规定背景图片的定位区域。也就是背景图片从哪个位置开始作为起点 content-box:从文本下方开始 border-box:从边框下方开始 padding-box:从padding下方开始 背景裁剪 background-clip:从哪个位置保留背景图片的意思，超出裁剪范围的背景图片将被剪切 content-box:从文本下方开始 border-box:从边框下方开始 padding-box:从padding下方开始 背景依附 background-attachment:从哪个位置保留背景图片的意思，超出裁剪范围的背景图片将被剪切 local:背景图片会跟随内容滚动,不会受overflow属性的影响 scroll:背景图片会跟随内容滚动,受overflow属性的影响 fixed:背景图片不会跟随内容滚动

颜色

a:透明度,0.0(完全透明)~1.0(不透明)
background-color: rgba(255,0,0,0.3);
设置透明度：
opacity: 0.5;

文本

text-overflow:文本溢出:仅仅是个策略，需要配合overflow才能看到效果

text-overflow:ellipsis
white-space:nowrap
overflow:hidden

text-shadow:x轴移动，y轴移动 ， 模糊宽度 ， 颜色
eg: text-shadow: -5px -5px 5px #FF0000;

轮廓

outline:设置元素的轮廓
outline-offset:设置边框和轮廓之间的距离

其他

• box-sizing: content-box(default): padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding ) border-box: padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width )

• resize:允许用户调节元素大小 both/horizontal(宽度可调)/vertical(高度可调)

• columns:多栏布局 eg:columns:100px 3; 给元素添加滚动条： overflow/overflow-x/overflow-y:scroll

---

html5总结

新增标签

article/header/footer/aside/nav

新属性

autofocus:自动获取焦点，取值：autofocus
required:必填项，取值：required
placeholder:占位提示信息，点击input或输入内容时消失
pattern:设置正则表达式

自动数据列表

<form action="" id="myform">
	<input type="submit" value="提交" />
</form>
<input type="text"  list="mydata" name="aa" form="myform"/>
<datalist id="mydata">
    <option value="sxt"></option>
    <option value="shsxt"></option>
    <option value="bjsxt"></option>
</datalist>

tips:在form表单外的input标签，可通过form属性关联到form表单

转载于:https://my.oschina.net/u/3581789/blog/1491565