@media screen and (min-device-width : 481px) {
#guarantee {
margin-right : 250px
}
}
如果设备屏幕宽度大于480px就会使用这些规则
font-family : Verdana , Geneva , Arial , sans-serif (字体样式)
用于web的字体系列包括serif , sans-serif , monospace , cursive和fantasy。serif和sans-serif字体最为常用。
-
font-size : small (有 xx-small , x-small , small , medium , large , x-large , xx-large 顺序从小到大)
- 14px
- 100% (100%大小没有变化)
-
1.0em (1.0表示比例没有变化)
使用相对字体大小可以让你的页面更可维护。
以上是改变字体大小
font-weight : normal (有lighter , normal , bold , bolder 顺序由细到粗,一般加粗用bold，normal是取消加粗)
font-style: italic (斜体文本，并不是所有字体都支持斜体风格(italic)，所以你得到的实际上称为倾斜(oblique)文本。)
font简写，font : font-style font-variant font-weight font-size/line-height font-family
color: red (字体为红色)
@font-face {
font-family: Emblema One;
src: url(“http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.woff”),
url(“http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.ttf”)
}这个一般放在开头，从url下载字体，然后命名为Emblema One
如果你要使用某种字体，而默认情况下用户可能没有安装这种字体，可以在CSS中使用@font-face规则。
text-decoration : none (none取消装饰 , underline下划线 , overline上划线 , line-through有一个从文本中间穿过的线 )
text-align : center
(文本排列，center文本居中，left文本左对齐，right文本右对齐)
line-height : 1.6em(行高) (normal允许浏览器选择一个适当的行高大小，通常要根据字体来确定)
border-color : black;
border-width : 1px; (可以使用关键字thin, medium或thick指定边框宽度，或者用像素数指定。)
border-style : solid;
要指定一个边框样式，只需要使用border-style属性，并提供一下某个样式值。
solid(实线) dotted(虚线) double(双线) dashed(破折线) groove(槽线) inset(内凹) outset(外凸) ridge(脊线)
border-radius : 15px (可以在四个角上都创建圆角，或者只对一个角或这4个角的任意组合创建圆角。)
border是边框，以上是边框设置
background-color: red (将背景颜色设置为红色 )
background-image : url (images/background.gif)
background-image属性设置为一个URL，这可以是一个相对路径，也可以是一个完整的URL(http://***)
background-position : top left ;
background-position属性会设置图像的位置，可以按像素指定，也可以指定为一个百分数，或者还可以使用关键字指定，如top , left , right , bottom和center.
background-: no-repeat;
background-repeat默认的，背景图会“平铺”，也就是反复反复来填满整个背景空间,属性可以控制这种平铺行为。(no-repeat图像显示一次，根本不重复; repeat-x图像只在水平方向上重复; repeat-y图像只在垂直方向上重复; inherit按父元素的设置来处理。)
内边框：padding:25px
外边框：margin:25px
a : link {
color : grenn;
}
这个选择器应用于处于未访问状态的链接
a : visited {
color : red;
}
这个选择器应用于已访问的链接
a : hover {
color : yellow;
}
悬停在一个链接上时会应用这个选择器
!important(优先级)
float : right (文本右浮动)
text-decoration: none (超链接去下横线)
border-spacing:10px (表格中的单元格增加10像素的边框间距)
vertical-align:top; (top表格文字垂直对齐，midle中间对齐，bottom底端对齐)
position : relative (absolute绝对定位，relative相对定位，fixed固定定位，static静态定位)
section(如果要增加一个元素来标记一些内容，指示这是由相关内容构成的一个结构明确的区块。)
article(用于类似博客帖子、论坛帖子和新闻报道等独立的内容)
list-style-type: none (Disc是默认的列表标记类型，circle属性值提供一个简单的圆形标记，square属性值提供一个方块标记，none删除列表项的项目符号)(允许改变列表中使用的列表标记类型)
list-style-image (允许指定列表标记的图像)
poster (如果愿意，可以提供一个可选的海报图像，视频未播放时就会显示这个海报)
controls (video播放控件)
source src="…" (浏览器从上往下查找，直到找到它能播放的一种格式)
border-collapse: collapse (是针对表格的一个特殊的CSS属性，允许将单元格边框合并为一个边框)
nth-child (伪类可以为表格隔行增加背景颜色)
first-child（第一个元素）
rowspan/colspan (占行/占列)
文本输入
<input type="text" name="fullname">
元素用于输入一行文本。它还有一些可选的属性，允许你为这个控件设置最大字符个数和宽度。
"type"指示你希望得到一个“文本”输入。
"fullname"大多数表单元素都需要一个名字，服务器脚本将使用这个元素名。
提交输入
<input type="submit" value="Order Now">
元素会创建一个按钮，允许你提交表单。点击这个按钮时，浏览器会把表单发送到服务器脚本进行处理。
"submit"提交按钮要指定"submit"作为元素的type属性值。
"value"用于自定义提交名字。
单按钮输入
<input type="radio" name="hotornot" value="hot">
<input type="radio" name="hotornot" value="not">
"radio"元素会创建包含多个按钮的控件，但是一次只能选择其中一个按钮。这就像老式的汽车电台按钮，“按下”一个按钮，其余的按钮就会“弹起”。
"name"与一组给定选项关联的单选钮必须有相同的名字。
"value"不过每个选项可以有不同的值。
如果单按钮输入元素增加一个布尔属性“checked”，浏览器显示表单时就会默认地选中这个元素。
布尔属性不需要值，如果有属性checked，这个输入控件就会选中。
复选框输入
<input type="checkbox" name="spice" value="Salt">
<input type="checkbox" name="spice" value="Pepper">
<input type="checkbox" name="spice" value="Garlic">
"checkbox"元素会创建一个复选框控件，可以选中也可以不选中。多个复选框可以放在一起，如果是这样，你可以根据需要选中多个选项。
"checkbox"类似于单选钮，对各个选项使用相同的checkbox元素。
"spice"相关的复选框也共用一个名字。
"value"每个复选框有一个不同的值。
文本区
<textarea name="comments" rows="10" cols="48"></textarea>
"textarea"元素会创建一个多行的文本区，可以在其中输入多行文本。如果输入的文本在文本区中放不下，右边还会出现一个滚动条。
使用name属性为元素指定一个唯一的名字。
rows属性告诉浏览器文本区高度为多少个字符。
cols属性告诉浏览器文本区宽度为多少个字符。
开始和结束标记之间的所有文本会成为浏览器文本区控件中的初始文本。
select
<select name="characters">
<option value="Buckaroo">Buckaroo Banzai</option>
<option value="Tommy">Perfect Tommy</option>
<option value="Penny">Penny Priddy</option>
<option value="Jersey">New Jersey</option>
<option value="John">John Parker</option>
</select>
"select"元素会在Web页面中创建一个菜单控件。菜单提供了一种从一组选项中做出选择的方法。"select"元素与下面的"option"元素结合使用可以创建一个菜单。
name属性为select元素指定一个唯一的名字。
只需加入multiple属性，就把一个单选菜单变成了多选菜单。
option
<select name="characters">
<option value="Buckaroo">Buckaroo Banzai</option>
<option value="Tommy">Perfect Tommy</option>
<option value="Penny">Penny Priddy</option>
<option value="Jersey">New Jersey</option>
<option value="John" selected>John Parker</option>
</select>
“option”元素与"select"元素结合使用可以创建菜单。使用“option”元素来表示各个菜单项。
“option”元素的内容用作为菜单项的描述。每个菜单选项还可以包含一个表示这个菜单项的值。
selected表示默认选中
数字输入
<input type="number" min="0" max="20">
number会限制只能输入数字。甚至还可以用可选的属性指定这个元素允许的最小数和最大数。
type为"number"表示你只希望输入数字，而不是文本。
使用max和min属性来限制允许输入的数字。
范围输入
<input type="range" min="0" max="20" step="5">
range类似于number，只是它会显示一个滑动条，而不是一个输入框。
number和range都有一个可选的step属性，可以用来指定值的间隔数（步长）。
颜色输入
<input type="color">
使用color可以指定一个颜色。单击这个控件时，会弹出一个颜色选择器，允许你选择一个颜色，而不必输入颜色名或值。
如果浏览器不支持颜色输入元素，你会得到一个常规的文本输入控件。
日期输入
<input type="date">
使用date，可以利用一个日期选择控件指定日期。这个控件会创建一个合法的日期格式串，发送到服务器脚本。
email输入
<input type="email">
email就是一个文本输入元素，只不过在一些移动浏览器上，开始输入email时你会得到一个方便输入email的定制键盘。
tel输入
<input type="tel">
tel也只是一个文本输入元素，不过与email类似，它会在一些移动设备上弹出一个定制键盘。
url输入
<input type="url">
与email和tel类似，url也只是一个文本输入元素，不过会在一些移动设备上弹出一个定制键盘。
<input type="file" name="doc">
这个元素会创建一个文件输入控件，允许你选择一个文件，表单提交时，文件的内容会随其余的表单数据一同发送给服务器。使用这个元素的前提时必须使用POST方法。
<input type="text" placeholder="Buckaroo Banzai">
placeholder属性允许你提供一个提示，使用户了解你希望表单的这一部分需要怎样的内容。
<input type="text" placeholder="Buckaroo Banzai" required>
required属性指示一个输入域是必要的，要让表单成功提交，这个输入域中必须有值。
<input type="button">
button值表示定义可点击按钮
<label for="wenben">用户名</label>
<input type="text" id="wenben">
label标签为input元素定义标注
label标签用于绑定一个表单元素，当点击label标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验
input标签除type外，还有其他很多属性，其常用属性如下：
name 定义input元素的名称
value规定input元素的值
checked规定此input元素首次加载时应当被选中，是布尔属性
多行文本溢出显示省略号
扫一扫
1802
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
