首頁 > web前端 > html教學 > HTML+CSS_html/css_WEB-ITnose

HTML+CSS_html/css_WEB-ITnose

WBOY
發布: 2016-06-24 11:47:09
原創
1122 人瀏覽過

  做网站开发都知道,Html是网页开发的基础,而css是我们设计网页美感经常使用的布局手法,本篇为大家记录一下有关两者的基础知识,基础打牢了我们才能走的更远,不论是jsp还是php都不能脱离html存在。

 一、HTML标签:

  1、加粗标签

  2、倾斜标签

  3、单独样式

  4、引号

  5、

长文本引用

  6、

地址信息

  7、单行代码

  8、

多行代码
登入後複製

  9、

    从5开始编号

  10、

:作用在于有利用搜索引擎读懂表格

  11、

表格标题文本

  12、a标签的target="_blank":在新的页面打开

  13、a标签的title="鼠标滑过显示文本"

  14、图片描述文字

  15、文本标签:

  16、stry:样式标签 

  17、Email标签:

  

  

  18、下拉列表也可以进行多选操作,在

  

  19、label标签不会向用户呈现任何特殊效果,它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本,就会触发此控件。就是说,当用户单击选中该label标签时,浏览器就会自动将焦点转到和标签相关的表单控件上(就自动选中和该label标签相关连的表单控件上)。

<form>  <label for="male">男</label>  <input type="radio" name="sex" id="male" />  <br />  <label for="female">女</label>  <input type="radio" name="sex" id="female" />  <label for="email">输入你的邮箱地址</label>  <input type="email" id="email" placeholder="Enter email"></form>
登入後複製

  对于HTML中的常用标签就为大家总结到此,这些标签常用但不太容易记忆,本篇就是方便大家使用是查阅。下面我们一起温习一下CSS的基础知识吧。

 二、CSS:

  1、css的样式:内联式、嵌入式、外部式

  2、css的选择器分为:A、标签选择器:body{}B、类选择器:.setGreen{}C、ID选择器:#setGreen{}D、通用选择器:*{}

  3、文字排版:

        font-family:"宋体";

        font-weight:bold;粗体

        text-decoration:line-through;删除线

        text-decoration:underline;下划线

        text-indent:2em;缩进2个字节

        line-height:1.5em;行间距为1.5个字节

        letter-spacing:1.5em;字间距、字母间距

  4、三种方法的优先级:内联式 > 嵌入式 > 外部式,但是嵌入式>外部式有一个前提:嵌入式css样式的位置一定在外部式的后面。如右代码编辑器就是这样,代码在代码的前面(实际开发中也是这么写的)。感兴趣的小伙伴可以试一下,把它们调换顺序,再看他们的优先级是否变化。其实总结来说,就是--就近原则(离被设置元素越近优先级别越高)。

  5、伪类选择符:更有趣的是伪类选择符,为什么叫做伪类选择符,它允许给html不存在的标签(标签的某种状态)设置样式,比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色(a:hover{color:red;})。

  6、分组选择符:当你想为html中多个标签元素设置同一个样式时,可以使用分组选择符(,),如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色:h1,span{color:red;}它相当于下面两行代码:h1{color:red;}span{color:red;}

  7、权值的规则:标签的权值为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*/
  注意:还有一个权值比较特殊--继承也有权值但很低,有的文献提出它只有0.1,所以可以理解为继承的权值最低。

  8、元素分类:在讲解CSS布局之前,我们需要提前知道一些知识,在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素、内联元素(又叫行内元素)和内联块状元素。

  常用的块状元素有:

    

...

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板