我的原创地址:https://thorthegod.github.io/
-
消除列表原点: list-style:none||list-style-type:none
-
消除链接下划线:text-decoration:none(应用于 )
-
对元素设置display:block使其变成块元素,如:
a{display:block;}
可以把a相应的链接方式变成块状点击。 -
text-align是将文本中央对齐于块中
-
语义部分:
(1). **strong 是标明重点内容, 有语气加强的含义, 使用阅读设备阅读网络时会重读, 而是展示强调内容。strong 是标明重点内容, 有语气加强的含义, 使用阅读设备阅读网络时会重读, 而是展示强调内容。
i 内容展示为斜体, em 表示强调的文本;
(2).自然样式标签
b, i, u, s, pre
语义样式标签
strong, em, ins, del, code
(3).<span标签是没有语义的,它的作用就是为了设置单独的样式。把一段话圈起来,然后用css设置样式。
(4).语义化的作用
1更容易被搜索引擎收录。
2 更容易让屏幕阅读器读出网页内容。
(5).引用
这里用标签的真正关键点不是它的默认样式双引号而是它的语义:引用别人的话.
-
display 有哪些值? 说明他们的作用
block 块类型。 默认宽度为父元素宽度, 可设置宽高, 换行显示。
none 缺省值。 象行内元素类型一样显示。 即隐藏不展示
inline 行内元素类型。 默认宽度为内容宽度, 不可设置宽高, 同行显示。
inline-block 默认宽度为内容宽度, 可以设置宽高, 同行显示。
list-item 象块类型元素一样显示, 并添加样式列表标记。
table 此元素会作为块级表格来显示。
inherit 规定应该从父元素继承 display 属性的值。 -
margin 是用来隔开元素与元素的间距; padding 是用来隔开元素与内容的间隔。
margin 用于布局分开元素使元素与元素互不相干;
padding 用于元素与内容之间的间隔, 让内容( 文字) 与( 包裹) 元素之间有一段距离。 -
<br/换行
<hr/分割线(可用css修改线的样式) -
img语法:
<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">
举例:
<img src = "myimage.gif" alt = "My Image" title = "My Image" />
讲解:
1、src:标识图像的位置;
2、alt:指定图像的描述性文本,当图像不可见时(下载不成功时),可看到该属性指定的文本;
3、title:提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本);
4、图像可以是GIF,PNG,JPEG格式的图像文件。 -
文本域textarea支持多行文本输入
当用户需要在表单中输入大段文字时,需要用到文本输入域。
语法:
<textarea rows="行数" cols="列数">文本</textarea>
1、标签是成对出现的,以<textarea>
开始,以</textarea>
结束。
2、cols :多行输入域的列数。
3、rows :多行输入域的行数。 -
单选框,复选框
语法:
<input type="radio/checkbox" value="值" name="名称" checked="checked"/>
1、type:
当type="radio"时,控件为单选框
当type="checkbox"时,控件为复选框
2、value:提交数据到服务器的值(后台程序PHP使用)
3、name:为控件命名,以备后台程序ASP、PHP使用
4、checked:当设置checked="checked"时,该选项被默认选中
注意:同一组的单选按钮,name取值一定要一致,这样同一组的单选按钮才可以起到单选的作用 -
Label 的作用是什么?是怎么用的?
label 标签来定义表单控制间的关系,当用户选择该标签时,浏览器会自动将焦点转到和标签相关的表单上。例子:
<label for="Name">Number:</label>
<input type="text" name="Name" id="Name"/>
<label>Date:<input type="text" name="B"/></label>
-
placeholder属性可以提供输入字段预期值展示,在输入时消失。
适用于以下的类型:text,search,url,telephone,password和email。 -
<input type="reset" value=重置>
为重置按钮,当点击后使输入框重置。注意:此按钮会重置所有输入框内容。 -
伪类选择符
伪类选择符允许给html不存在的标签设置样式,比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色:
a:hover{color:red;}
这行代码会使被标签包裹的文字内容中的“胆小如鼠”字体颜色在鼠标滑过时变为红色。 -
标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100。例如下面的代码:
p{color:red;} /权值为1/
p span{color:green;} /权值为1+1=2/
.warning{color:white;} /权值为10/
p span.warning{color:purple;} /权值为1+1+10=12/
#footer .note p{color:yellow;} /权值为100+10+1=111/ -
重要性优先
我们在做网页代码的时,有些特殊的情况需要为某些样式设置具有最高权值,怎么办?这时候我们可以使用!important来解决。
如下代码:
p{color:red!important;}
p{color:green;}
<p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p>
这时 p 段落中的文本会显示的red红色。
注意:!important要写在分号的前面。 -
删除线: p a{text-decoration:line-through;}
-
1,段落缩进
中文文字中的段前习惯空两个文字的空白,这个特殊的样式可以用下面代码来实现:
p{text-indent:2em;}
2,段落排版–行间距
行间距属性(line-height),如下代码实现设置段落行间距为1.5倍。
p{line-height:1.5em;}
3,段落排版–字间距、字母间距
文字间隔、字母间隔设置:
如果想在网页排版中设置文字间隔或者字母间隔就可以使用 letter-spacing来实现,如下面代码:
h1{
letter-spacing:50px;
}
了不起的盖茨比
注意:这个样式使用在英文单词时,是设置字母与字母之间的间距。
单词间距设置:
使用word-spacing来实现。如下代码:
h1{ word-spacing:50px;```<h1>welcome to imooc!</h1>```
-
常用的块状元素有:
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的内联元素有:
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的内联块状元素有:
<img>、<input>
块级元素特点:
1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。
2、元素的高度height、宽度width、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。
行内元素相反。
内联块级元素:
inline-block元素特点:
1、和其他元素都在一行上;
2、元素的高度、宽度、行高以及顶和底边距都可设置。 -
盒模型:
(1)边框border:盒子模型的边框就是围绕着内容及补白的线。拥有3个属性:粗细(border-width)、样式(-style<虚线dashed,点线dotted,实线solid>)和颜色(-color),分为border-top,-bottom,-left,-right四边。
(2)边界margin:元素与其它元素之间的距离可以使用margin来设置。边界也是可分为上、右、下、左(顺序)。
下代码:
div{margin:20px 10px 15px 30px;}
也可以分开写:
div{
margin-top:20px;
margin-right:10px;
margin-bottom:15px;
margin-left:30px;}
如果上下左右的边界都为10px;可以这么写:
div{ margin:10px;}
如果上下边界一样为10px,左右一样为20px,可以这么写:
div{ margin:10px 20px;}
ps:padding和margin的区别,padding在边框里,margin在边框外。
(3)填充padding:元素内容与边框之间是可以设置距离的,称之为填充padding。填充也可分为上、右、下、左(顺序同margin)。
(4)内容content:根据具体内容可进行编辑,如分为文本text,图片img等。 -
布局
在网页中,元素有三种布局模型:
1、流动模型(Flow)
流动布局模型具有2个比较典型的特征:
第一点,块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,在默认状态下,块状元素的宽度都为100%,会以行的形式占据位置。
第二点,在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示。
(块状上下,内联左右)
2、浮动模型 (Float)
任何元素在默认情况下是不能浮动的,但可以用CSS定义为浮动,如div、p、table、img等元素都可以被定义为浮动。如下代码可以实现两个div元素一行显示。
div{
width:200px;
height:200px;
border:2px red solid;
float:left;
}
<div id="div1"></div>
<div id="div2"></div>
注意:设置浮动的同时一定要先设置块状元素的宽度,且需要浮动的几个元素宽度加起来一定要小于容器元素的宽度。
3、层模型(Layer)
层模型有三种形式:
1、绝对定位(position: absolute)——相对于父位(参照定位的元素必须加入position:relative;)
这条语句的作用将元素从文档流中拖出来,然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口。
2、相对定位(position: relative)——相对于移动前的位置而不是父位
3、固定定位(position: fixed)——相对于网页窗口静止,即拖动滚动条时位置固定不变。(与background-attachment:fixed?属性功能相同) -
在有相同权值的情况下,优先顺序是内联式>嵌入式>外部式。
-
通用选择器 *{CSS内容};作用于所有标签。
-
块状元素的居中需要将margin的left、right值设置为auto 。
-
文本特殊
(1)我的文字后有<sub>下标</sub>
——添加文本的下标(1)我的文字后有<sub>下标</sub>
——添加文本的下标
我的文字后有<sup>上标</sup>
——添加文本的上标
(2)<i>字体倾斜</i>
——istatic
(3)<abbr title="This is my senior high school teacher">Teacher</abbr>
——缩写,详细信息通过鼠标停留显示
(1)
<a href="#tips">有用的提示</a>
定义该文件中的文本书签tips
<a href="file:///Users/thor/Desktop/10.2(1).html#tips" target="_blank">有用的提示</a>
定义指向其他文件中的地址的书签(target="_blank"——新网页打开)
(2)
<a name="tips">基本的注意事项-小提示</a>
定义后文中tips的位置(name或者id等可以)
(3)若想用图片等作为链接点,只需要将对应代码填入<a href="想要前往的地址"></a>
中。
- 制表格时
(1)
<th colspan="2">a</th>
可以构建两横格为一格的格子,内容为a;colspan换成rowspan可以构建两竖格为一格的格子。
(2)在table属性中加入cellspacing="xx"可改变单元格间距——单元格间的距离;加入cellpadding可改变单元格边距——单元格的内容与边框的距离。
(3)在table属性中加入background=“某图片地址”,可将图片插入表格中。
-
input相关
(1)在input语句(内有list="XX"为datalist定位)后加入(1)在input语句(内有list=“XX"为datalist定位)后加入
<datalist id="XX">
<option value="...">
<option value="...">
...
</datalist>
可以使该输入框变为单选,选项为value值。
ps:任何需要提交value值给后端的input都必须要加入name=”"属性,从而在后端储存。
(2)在input的button等语句中加入οnclick="alert(‘声明’)"可以在点击时产生声明动作。如
<input type="button" onclick="alert('Sorry,we are trying to resolve.')" value="Any false?">
-
插入js
<script type="text/javascript" rel="script" src="js地址"></script>
,该语句一般放在body后html前,防止js内的语句执行时html资源尚未加载完。
插入css<link rel="stylesheet" type="text/css" href="cs地址"/>