HTML+CSS自学笔记

type= " text/css " rel= "stylesheet" href= "lounge.css" media="screen and (min-width:481px)"> 要记住，这个元素告诉浏览器查找一个名为 “lounge.css”的外部样式表，当分辨率宽度大于480像素，使用这个CSS。

@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元素首次加载时应当被选中，是布尔属性

多行文本溢出显示省略号

HTML+CSS自学笔记相关推荐

CSS自学笔记（16）:CSS3 用户界面
CSS3中,也新增了一些关于用户界面的属性,这些属性可以重设元素或者盒子的尺寸.轮廓等等. 新增的部分属性的浏览器支持情况属性浏览器支持 resize IE Firefox Chrome Safa ...
CSS自学笔记（15）:CSS3多列布局
在CSS3中,也新增了一些关于文本布局的几个比较简单的属性.通过这些新增的属性,我们可以对文本进行简单的排版,就想报纸和杂志那样. 新增的部分属性,以及浏览器支持情况: 属性浏览器支持 column ...
CSS自学笔记（9）:CSS拓展（二）
CSS图片当一个网页上有一张或多张图片,而且这些图片的尺寸比较大时,为了是网页布局更紧凑合理,我们可以将这些图片放到一个图片库里,可以有效的防止图片过大可能会对网页布局造成的不良影响. 通过CSS我 ...
CSS 自学笔记（三）
一. CSS的三大特性 1. 层叠性:主要解决样式冲突问题. 样式冲突:执行就近原则,也可以看作会覆盖. 2. 继承性:子标签会继承父标签里的某些样式如文本颜色,字号,跟文字相关的. 行高的继承:行 ...
怎么用vc采集ni卡数据_SystemLink自学笔记（6）：SystemLink架构和数据服务
1. SystemLink架构和数据服务 1.1. 架构和特点现在在对SystemLink的功能有了一个大概的了解后,可以进一步从它的整体架构学习这门新技术了.NI官网给出了白皮书,原文是英文资料, ...
HTML/CSS学习笔记01【概念介绍、基本标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
深入理解弹性盒布局（fiex-box）——Web前端系列自学笔记
文章目录弹性盒布局弹性盒布局概述弹性盒布局属性 display flex-flow justify-content align-items order flex align-self 总结弹性 ...
PostCSS自学笔记（二）【番外篇二】
图解PostCSS的插件执行顺序文章其实是一系列的早就写完了. 才发现忘了发在SegmentFault上面, 最早发布于https://gitee.com/janking/Inf... 这次我继续研 ...
JavaWeb自学笔记(一)
JavaWeb自学笔记(一) 学习视频:BV12J411M7Sj 文章目录 JavaWeb自学笔记(一) 1.基本概念 1.1 web应用程序 1.2 静态web 1.3 动态web 2.web服务器 ...

HTML+CSS自学笔记

HTML+CSS自学笔记相关推荐

最新文章

热门文章