网页css样式表部分

层叠样式表:CSS Cascading Style Sheet。V2.1  (3.0版本有些旧系统不支持)

控制页面样式外观。

一、样式表分三类: 1.内联样式表。——放在元素的开始标记中。——只对当前元素起作用。

<input name="txt" style="border:0px; border-bottom:1px solid black;" type="text" />       (solid意思是实线)

2.内嵌样式表。——放在页面的<head></head>中间。——可以对整个页面。

<head>

...

<style type="text/css">

input

{

border:0px;  border-bottom:1px solid red;

}

</style> </head>

3.外部样式表。——放在一个单独的.css样式表文件中。——可以对整个网站。

(1)外部样式表的定义

(2)外部样式表的调用

新建一个css文件,用来放样式表,如果要在HTML文件中调用样式表,需要在HTML文件中点右键--css样式--附加样式表。一般用link连接方式

二、样式表的选择器:

内嵌、外部样式表的一般语法:

选择器

样式=值;

样式=值;

样式=值;

....

1.基本:

(1)标签选择器:用标记名称来当选择器。 input{.....} div{...} span{...} td{...}

(2)类别选择器:在HTML元素中使用class对元素进行分类,然后使用这个class的值作为选择器。以"."开头 .class的名{.....}

(3)ID选择器:针对HTLM中相应ID的元素起作用。以"#"开头 #ID的名{...} #d1{font-size:48px;} #dd{border:5px dotted red;}

2.复合: (1)用逗号隔开。——并列关系,同时起作用。 input,#dd,.yellow,.uu {  color:gray;  line-height:28px;

}

(2)用空格隔开。——后代关系。 div uu {   }

<input name="txt" type="text" class="uu"/>     <div>  <input name="txt" type="text" />         <input name="txt" type="text" class="uu" value="******"/>         <span>             <input name="txt" type="text" class="uu" value="******"/>         </span>     </div> 什么是后代???后代即父辈以后的都是后代 而子集值包含下一代 注意:<p>里面不要配div  反之则可以

(3)class二次筛选。 标签选择器.class选择器{....} input.uu {  border:5px double red; }

例:

对比:div .uu与div.uu的不同。

中间有空格的表示后代,没有空格的是筛选的意思。

时间: 2024-10-05 04:44:19

网页css样式表部分的相关文章

HTML静态网页(css样式表)美化

CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/    此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例:<p >内联样式表</p> 2.内嵌样式表 作为一个独立区域内嵌在网页里,必须写在head标签里面. <style type="text/css"> p   //格式对p标签起作用 { 样式: } </sty

HTML静态网页(css样式表)

CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/    此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例:<p style="font-size:14px;">内联样式表</p> 2.内嵌样式表 作为一个独立区域内嵌在网页里,必须写在head标签里面. <style type="text/css">

网页设计:重置CSS样式表

转自豆瓣:http://www.douban.com/note/330400235/ 网页设计,让人最头疼的莫过于让页面兼容各大浏览器,准确些是兼容它们“默认”的CSS样式表.这样,“抹掉”这些默认样式表成了首要问题,也就有了CSS样式表重置一说,目前用的最多的,也是自己现在正在用的方法是,添加以下代码: 第一种方式 * {margin:0px; padding:0px;} 现在众多的设计师发现,这行代码虽然简单,但却让网页解析太慢,呵呵,当然了,自己是业余的,不用太在意.于是出现了几种CSS重

网站开发综合技术 第二部分 CSS样式表

第2部分 CSS样式表 CSS(Cascading Style Sheets,层叠样式表),作用是美化HTML网页. /*注释*/    注释语法 2.1.样式表的基本概念 2.1.1.样式表分类 1.内联样式表 和html联合显示,控制精确,但是可重用性差,冗余多. 例:<p style="font-size:14px;">内联样式表</p> 2.内嵌样式表 作为一个独立区域内嵌在网页里,必须写在head标签里边. <style type= "

HTML基础(三)——css样式表

CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例:<p style="font-size:14px;">内联样式表</p> 2.内嵌样式表 作为一个独立区域内嵌在网页里,必须写在head标签里面. <style type="text/css"> p  

CSS样式表初始化代码

CSS为什么要初始化?建站老手都知道,这是为了考虑到浏览器的兼容问题,其实不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面差异.当然,初始化样式会对SEO有一定的影响,但鱼和熊掌不可兼得,但力求影响最小的情况下初始化. 最简单的初始化方法就是: * {padding: 0; margin: 0;} .有很多人也是这样写的.这确实很简单,但有人就会感到疑问:*号这样一个通用符在编写代码的时候是快,但如果网站很大,CSS样式表文件很大,这样写的话,他会把所有的标签

CSS自学笔记(3):CSS样式表的使用

当浏览器读到一个样式表时,浏览器会根据这个样式表来格式化html文档,从而表现出各式各样的网页. 想要浏览器读到样式表,有三种方法: 1.外部样式表 外部样式表可以理解为.CSS文件.当多个页面使用同一个样式的时候,外部样式表是一个很理想的选择. 在使用外部样式表的情况下,可以通过改变一个文件来改变整个站点的外观,无需在调整html文件,尤其是多个页面使用同一个样式的时候. 每个html页面使用标签<link>来连接外部样式表: <head> <link rel="

2016年10月27日--css样式表

CSS样式表 样式表分类 1.内联样式表 和html联合显示,控制精确,但是可重用性差,冗余多. !doctype html> <html> <head> <meta charset="UTF-8"> <title>css内嵌样式</title> </head> <body> <style type="text/css"> #div{width:100px;heig

(转)CSS样式表继承详解

什么是css 继承?要想了解css样式表的继承,我们先从文档树(HTML DOM)开始.文档树由HTML元素组成. 文档树和家族树类似,也有祖先.后代.父亲.孩子和兄弟^_^.这很容易理解吧,笔者在这里就不一一赘述了.希望深入了解的朋友请google之. 那么CSS样式表继承指的是,特定的CSS属性向下传递到子孙元素. 下面举个例子,有如下html代码片段: <p>CSS样式表<em>继承特性</em>的演示代码</p> 需要注意的是em是包含在p之内的.