基本的css式样学习一

原创 2012年03月27日 16:10:03

1、h1 {color:red; font-size:14px;}

派生选择器

li strong { font-style: italic; font-weight: normal; }

1、h1 em {color:red;}

上面这个规则会把作为 h1 元素后代的 em 元素的文本变为 红色。其他 em 文本(如段落或块引用中的 em)则不会被这个规则选中:

<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>

2、如果您希望选择只作为 h1 元素子元素的 strong 元素,可以这样写:

h1 > strong {color:red;}

3、

id 选择器以 "#" 来定义。

下面的两个 id 选择器,第一个可以定义元素的颜色为红色,第二个定义元素的颜色为绿色:

#red {color:red;}
#green {color:green;}
4、
div#sidebar {
	border: 1px dotted #000;
	padding: 10px;
	}
5、
.center {text-align: center}

在上面的例子中,所有拥有 center 类的 HTML 元素均为居中。

在下面的 HTML 代码中,h1 和 p 元素都有 center 类。这意味着两者都将遵守 ".center" 选择器中的规则。

	<h1 class="center">
		This heading will be center-aligned
	</h1>
	<p class="center">
		This paragraph will also be center-aligned.
	</p>
6、
.fancy td {
	color: #f60;
	background: #666;
	}

在上面这个例子中,类名为 fancy 的更大的元素内部的表格单元都会以灰色背景显示橙色文字。(名为 fancy 的更大的元素可能是一个表格或者一个 div)

元素也可以基于它们的类而被选择:

td.fancy {
	color: #f60;
	background: #666;
	}

在上面的例子中,类名为 fancy 的表格单元将是带有灰色背景的橙色。

7、

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
input[type="text"]
{
  width:150px;
  display:block;
  margin-bottom:10px;
  background-color:yellow;
  font-family: Verdana, Arial;
}

input[type="button"]
{
  width:120px;
  margin-left:35px;
  display:block;
  font-family: Verdana, Arial;
}
</style>
</head>
<body>

<form name="input" action="" method="get">
<input type="text" name="Name" value="Bill" size="20">
<input type="text" name="Name" value="Gates" size="20">
<input type="button" value="Example Button">

</form>
</body>
</html>

7、

如果某些属性在不同的样式表中被同样的选择器定义,那么属性值将从更具体的样式表中被继承过来。

例如,外部样式表拥有针对 h3 选择器的三个属性:

h3 {
  color: red;
  text-align: left;
  font-size: 8pt;
  }

而内部样式表拥有针对 h3 选择器的两个属性:

h3 {
  text-align: right; 
  font-size: 20pt;
  }

假如拥有内部样式表的这个页面同时与外部样式表链接,那么 h3 得到的样式是:

color: red; 
text-align: right; 
font-size: 20pt;

8、背景颜色

body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}(背景颜色为透明的)
p {background-color: rgb(250,0,255)}

p.no2 {background-color: gray; padding: 20px;}

9、背景图片

body {background-image:url(/i/eg_bg_04.gif);}
p.flower {background-image: url(/i/eg_bg_03.gif); padding: 20px;}
a.radio {background-image: url(/i/eg_bg_07.gif);  padding: 20px;}

10、,背景图像将从一个元素的左上角开始。请看下面的例子:

body
  { 
  background-image: url(/i/eg_bg_03.gif);
  background-repeat: repeat-y;
  background-position:center;(背景定位)
background-position:50% 50%;(百分数值)
background-position:50px 100px;长度值
  }

11、背景关联

如果文档比较长,那么当文档向下滚动时,背景图像也会随之滚动。当文档滚动到超过图像的位置时,图像就会消失。

您可以通过 background-attachment 属性防止这种滚动。通过这个属性,可以声明图像相对于可视区是固定的(fixed),因此不会受到滚动的影响:

body 
  {
  background-image:url(/i/eg_bg_02.gif);
  background-repeat:no-repeat;
  background-attachment:fixed
  }

 

前端基础学习-常见CSS网页布局

常见的网页布局大致分为:一列布局,两列布局,三列布局以及混合布局一列布局 Document .header{ height: 8...
  • dingshuhong_
  • dingshuhong_
  • 2016年03月10日 11:12
  • 1059

html css 术语 和 基本语法

术语语法 介绍 在学习之前区别html和css之间不同,语法和常用的术语。 Html语言是被创建用于给予网页内容结构和语义信息的超文本语言。 CSS语言是被创建用于给予网页内容样式的层叠样式表。...
  • ZiLongO
  • ZiLongO
  • 2014年04月26日 23:08
  • 1480

CSS中的三种基础选择器,

Html中有三种方法可以使用CSS,而在css中,有三种基础的选择器 1、元素选择器     也叫标签选择器,即在CSS中利用标签名称来定义其外观 2、类选择器,是用点.符号开头,后面跟上一个自定义的...
  • liusure09
  • liusure09
  • 2016年01月13日 16:00
  • 1262

CSS最详细的基础教程

层叠样式表CSS 绝对原创 CSS简介:Cascading Style Sheets(层叠样式表)的缩写,它是一种用来表现HTML或XML等文件样式的计算机语言。 CSS的作用: 是定义网页外...
  • wulove52
  • wulove52
  • 2016年08月30日 20:54
  • 2010

jQuery中的DOM和CSS操作

jQuery中的DOM和CSS操作DOM ,它是一种文档对象模型。方便开发者对HTML 结构元素内容进行展示和修改。在JavaScript 中,DOM 不但内容庞大繁杂,而且开发的过程中需要考虑更多的...
  • depers15
  • depers15
  • 2016年07月14日 19:41
  • 465

超全的css新手学习笔记

适合新手的css学习笔记,超级全面
  • qq_34477549
  • qq_34477549
  • 2016年10月11日 10:27
  • 1664

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

两周之前写过该系列的第一篇,其实当时只是一个想法,这段时间迟迟未更新,是在思考一个解决过程。现在初有成效,就开更吧。...
  • wangfupeng1988
  • wangfupeng1988
  • 2015年02月06日 08:36
  • 1995

tensorflow27《TensorFlow实战Google深度学习框架》笔记-10-04 异步更新模式样例程序 code

# 《TensorFlow实战Google深度学习框架》10 TensorBoard计算加速 # win10 Tensorflow1.0.1 python3.5.3 # CUDA v8.0 cudnn...
  • longji
  • longji
  • 2017年04月11日 10:15
  • 555

如何在 HTML 中应用 CSS基础详解

接下来用这个 index.html 将在下文讲解中用到。 h2 tag class1 class2 h2 in main 如何在 HTML 中应用 ...
  • qq_21792169
  • qq_21792169
  • 2016年03月20日 01:24
  • 3471

HTML, CSS学习笔记(完整版)

第一章 div布局 前几课内容 .htm是早期的后缀,因为那时只能支持长度为3的后缀,因此html与htm是一样的。 shtml是服务器先处理然后再交给浏览器处理   #HTML小知识#之#...
  • u011925500
  • u011925500
  • 2014年10月02日 00:28
  • 4439
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:基本的css式样学习一
举报原因:
原因补充:

(最多只允许输入30个字)