HTML3层叠样式表

层叠样式表:CSS Cascading Style Sheet。V2.1 

控制页面样式外观。

 

一、样式表分三类:

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

<input name="txt" style="border:0px; border-bottom:1px solid black;" type="text" />

 

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

<head>

...

<style type="text/css">

input

{

border:0px;

border-bottom:1px solid red;

}

</style>

</head>

 

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

(1)外部样式表的定义

 

(2)外部样式表的调用

 

关掉样式表依然可以看到

 

 

二、样式表的选择器:

 

 

 

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

选择器

   样式=值;

   样式=值;

   样式=值;

   ....

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

{

background-color:blue;

}

 

    <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>

什么是后代???

 

(3)class二次筛选。

标签选择器.class选择器{....}

input.uu

{

border:5px double red;

}

 

例:

 

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

 

 

 

 

 

 

 

 

时间: 2024-10-13 06:00:16

HTML3层叠样式表的相关文章

CSS层叠样式表

层叠样式表     Cascading Style Sheet 一.层叠样式表的分类:1.外部——.css文件2.内嵌——<head></head>3.内联——放在标记的style属性上 优先级为:内联>内嵌>外部 二.选择器.(一)基本选择器1.ID选择器:#2.class选择器:.3.标签选择器:标签名 优先级为:#>.>标签名 (二)组合选择器1.用逗号隔开.并列关系2.用空格隔开.后代关系.3.筛选:选择器.class选择器.

JAVAEE------css层叠样式表知识点总结

CSS 1.css概述 * Cascading Style Sheets:层叠样式表 ** 层叠:一层一层(优先级,最终以哪个样式为准) ** 样式表:很多的属性和属性值 *** 增强页面的显示效果 *** CSS将网页内容和显示样式进行分离,提高了显示功能 * 要想使用css,必须要和html在一起使用 2.css和html的结合方式 (1)每个html标签都有一个属性 style,在style里面设置样式 * <div style="background-color:red;color

HTML CSS 层叠样式表 一

CSS,全拼Cascading Style Sheets,层叠样式表,用于控制html<body>的元素的样式和布局. 一.CSS的三种引用方式 1.内嵌 <div style="width:200px;height:200px;color:red;background-color:blcak"></div> 内嵌 样式为宽200像素,像素必须加px或者em或者百分比:宽度为200像素:字体颜色为红色:背景颜色为黑色:可以无限添加属性,用分号;隔开.

了解HTML CSS布局(层叠样式表)

CSS全称为"层叠样式表(Cascading Style Sheets)", 它主要是用于定义HTML内容在浏览器内显示的样式, 比如文字, 颜色, 视觉上的静态效果, 布局等等. 如果说HTML是网页开发的根本, 那么CSS就是修饰网页的那支美工笔, 而以后要学习的JS(JavaScript)将会是网页的灵魂(个人拙见). 从一个简单的例子讲解下CSS代码. 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <met

CSS层叠样式表(一)

一.css含义 层叠样式表,用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言.CSS目前最新版本为CSS3. 二.几种样式控制方式(就近原则) 1.行内样式 <body> <div style="color:red;"></div> </body> 2.内联样式 <head> <title>这是内联样式</title> <style type="text/css"

复习 层叠样式表

层叠样式表:CSS Cascading Style Sheet.V2.1 控制页面样式外观. 一.样式表分三类:1.内联样式表.——放在元素的开始标记中.——只对当前元素起作用.<input name="txt" style="border:0px; border-bottom:1px solid black;" type="text" /> 2.内嵌样式表.——放在页面的<head></head>中间.——可

LESS CSS 框架简介 使用 LESS 简化层叠样式表(CSS)的编写

LESS 是动态的样式表语言,通过简洁明了的语法定义,使编写 CSS 的工作变得非常简单.本文将通过实例,为大家介绍这一框架. 简介 CSS(层叠样式表)是一门历史悠久的标记性语言,同 HTML 一道,被广泛应用于万维网(World Wide Web)中.HTML 主要负责文档结构的定义,CSS 负责文档表现形式或样式的定义. 作 为一门标记性语言,CSS 的语法相对简单,对使用者的要求较低,但同时也带来一些问题:CSS 需要书写大量看似没有逻辑的代码,不方便维护及扩展,不利于复用,尤其对于非前

实验时css层叠样式表不更新的情况

自定义了CSS的样式,希望在页面中起作用.因为MVC中Views/Shared/_Layout.cshtml是所有试图的公共文件,如下: <!DOCTYPE html> <html> <head> <title>@ViewBag.Title</title> <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet"

CSS 层叠样式表

语法: 层叠样式表有着简单的语法并且使用一些英语关键词来指定各种样式属性的名字.一个样式表包括一系列规则.每个规则或者规则集包含一个或多个选择器和一个声明块. 选择器 在层叠样式表中,选择器经常用来声明部分标记样式,而这些标记样式通过匹配的标签和属性来运用到标签样式自身.选择器可以运用在: 所有指定类型的元素,例如, 第二级头标签 h2 由属性指定的元素,特别是 id:文档中独一无二的标识符 class:文档中独一无二的多元素组. 在文档数中,元素依赖其他元素的相对位置 类和ID都是大小写敏感的