学习css简单内容

Css的class,ID和上下文选择符

Class选择符。

Class选择符用来配置某一类css规则,将其应用到网页中一个或多个区域。配置一类样式时,要将选择符配置成类名。在类名前加(.)。类名必须以字母开头,可包含字母,连字符和下划线。类名不能出现空格。

下面以future为类名,配置文本字体颜色为红色。

.future{color:#FF0000;}

ID选择符

用id选择符想网页中单个区域应用独特的css规则。Class选择符可在网页上多次应用。而id选择符在每个网页中只能应用一次。为某个id配置样式说的时候,要在id前面加#。Id名称可以是字母,数字,下划线和连字符。Id名称也不能包含空格。

以下代码在样式表中配置名为content的id:

#content{color:#333333;}

使用id属性,即id=content,便可将id为content的样式应用于你希望的元素。以下代码将id为content的样式应用于一个<div>标记:

<div id=”content”>只是一个例子</div>

后代选择符。

用后代选择符在容器(父)元素的上下文配置一个元素。允许为网页的定制区域配置css,同时减少class和id的数量。先列出容器选择符,在配置样式选择符。例如将content中的段落配置成绿色文本:

#content p {color:#green; }

附:

body{

background-image:url("6.png");

background-position:left;

background-repeat:no-repeat;

background-color:#99FFCC;

color:#FFFF00;

}

div{

border:2px;

background-color:#CCCCCC;

font-size:50px;

font-family:sans-serif;

}

#content

{

color:#333333;

}

#content p {color:#FFFFFF;}

.future

{color:#FFFF00;

}

p{

text-indent:2em;

text-transform:

text-shadow:5px 5px 2px #FFFF00;

}

body{

background-color:#3FFFFF;

color:#1eee10;

}

h1{

background-color:#191970;

color:#E6E6E6;

}

h2{

background-color:#789456;

color:#6A6A7A;

}

nav{background-color:#gge2e2;

}

footer{

width:50px;

height:20px;

color:red;

background-color:#787878;

}

p{

background-image:url("6.png");

background-position:center;

background-repeat:no-repeat;

font-family:monospace;

font-size:40px;

padding-left:40px;

color:#FFF999;

}

ul{

list-style-image:url(13.jpg);

li{

background-color:red;

}

Css解密

时间: 2024-08-11 07:29:49

学习css简单内容的相关文章

(java)selenium webdriver学习---实现简单的翻页,将页面内容的标题和标题链接取出

selenium webdriver学习---实现简单的翻页,将页面内容的标题和标题链接取出: 该情况适合能能循环page=1~n,并且每个网页随着循环可以打开的情况, 注意一定是自己拼接的url可以打开,如:http://ask.testfan.cn/articles?page=15,就可以翻到文章分类的第15页: import java.io.File; import java.io.IOException; import java.util.ArrayList; import java.u

css知多少(2)——学习css的思路

两周之前写过该系列的第一篇,其实当时只是一个想法,这段时间迟迟未更新,是在思考一个解决过程.现在初有成效,就开更吧. 1. 一个段子 开题不必太严肃,写博客也不像写书,像聊天似的写东西是最好的表达方式. 记得之前看过一个段子,也可能是一件真事儿,这不重要.大体内容如下:一个香港的教授说:我们香港的大学和大陆的大学差的很远啊,大陆的大学连看门保安都懂得哲学,因为当你想要进入校园时,保安都会问你一个很哲学的问题“你是谁,你从哪里来,你到哪里去?”. 看完段子的第一反映肯定是很自嘲的笑了,笑了之后就忘

Python自动化开发学习16-前端内容综合进阶

css补充 这里再补充几个css的知识点,下面会用到 最小宽度-min-width 设置元素的最小宽度.举例说明,比如设置一个百分比的宽度,那么元素的宽度的像素值是会随着页面大小而变化的.如果设置一个最小的像素宽度,那么当变化到最小值之后,不会继续变小.在下面的例子中,会出现滚动条,保证元素的宽度: <body> <div style="height: 80px;width: 100%;background-color: blue;min-width: 800px;"

CSS学习------CSS定位(position)与浮动(float)

position属性:用来对元素进行定位 定位的意义: 定位允许你定义元素框相对于其正常位置应该出现的位置. 相对于父元素. 相对于另一个元素. 相对于浏览器窗口本身的位置. 定位分为:绝对定位和相对定位. 相对定位: 如果对一个元素进行相对定位,它将出现在它所在的位置上.然后,可以通过设置垂直或水平位置,让这个元素"相对于"它的起点进行移动. 在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间.因此,移动元素会导致它覆盖其它框. 示例: <html>   <

[Python]webservice 学习(1) -- 简单服务和调用

由于项目中需要用到webservice来做接口,于是花点时间先做知识储备. 开始的时候觉着这个webservice就是一个http请求啊,服务端监听,客户端发送xml报文,然后解析下发送了什么内容,返回响应的数据. 这是百度百科对webservice的定义,一般使用wsdl来描述服务. 后来我的误区就是 wsdl的xml  和 用http 请求组成的xml也就是用soap来请求webservice, 这两种xml为啥不一样... 困惑: 看了些资料以后才明白,wsdl就是你发布的webservi

学习CSS视觉格式化模型,你需要掌握这些知识

本文主要是学习CSS的视觉格式化模型visual formatting model(视觉格式化模型),它是一种处理文档并把它显示在可视化媒体上的算法.这是CSS中的一个基础概念.visual formatting model把文档的每一个元素转换成0个,1个或多个符合CSS盒模型的盒子,每个盒子的布局内容包括如下部分: . 盒子尺寸:明确指定受限制或不指定 . 盒子类型:行内,行内级,原子行内级,块盒 . 定位方案:包括正常文档流,float或者绝对定位 . 节点树的其他元素:其子元素或兄弟元素

Redis学习笔记(简单了解与运行)

Redis学习笔记(简单了解与运行) 开源的非关系型数据库 是REmote Dictionary Server(远程字典服务器)的缩写,以字典结构存储数据 允许其他应用通过TCP协议读写字典中的内容. Redis支持存储的键值数据类型 字符串类型 散列类型 列表类型 集合类型 有序集合类型 Redis的特性 通过一个列子看出Mysql和Redis的存储区别 例如: (存储一篇文章,文章包括:标题(title),正文(content),阅读量(views),标签(tags)) 需求: 把数据存储在

Objective-c学习笔记—— 基础内容

6.5.1 多重继承 Python也支持多种继承形式.一个能继承多个基类的类定义如下: class DerivedClassName(Base1, Base2, Base3): <statement-1> . . . <statement-N> 大多数情况,最简单而言,你可以把从父类继承下来的属性查询看成是遵循深度优先,从左到右. 而不是在同一等级重复的同样类中执行两次.因此,如果一个属性没在派生类中找到,首先会在base1然后再base1的基类中,如果在那里都没发现,就会在bas

HTML与CSS简单页面效果实例

本篇博客实现一个HTML与CSS简单页面效果实例 index.html 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 <link href="style.css" rel="stylesheet" type="t