css的核心基础

1、css的基本语法
在具体使用css之前，请各位兄弟姐妹先思考一个生活中的问题，一般情况下我们是如何描述一个人的呢？
小明{
民族：汉族；
性格：温柔；
性别：男；
体重：68kg；
身高：172CM；
}

这个表实际是由3个要素组成的，即姓名、属性、属性值。通过这样一张表，就可以把一个人的基本情况描述出来了。表中每一行分别描述了一个人的某一种属性，以及该属性的属性值。
css的规则：
三级标题{                             用英文写出来：h3{
  字体：宋体；                                           font-family：宋体；
  大小：15像素；                                       font-size：15px；
  颜色：红色；                                           color：red；
  装饰：下划线；                                        text-decoration：underline；
}                                                               }
**css的作用就是设置网页的各个组成部分的表现形式。

2、css选择器（先了解三个）
（1）标记选择器

（2）类别选择器

（3）ID选择器

（1）标记选择器案例演示：
style标签中的红色字体为“标记选择器”

<!doctype html>
<html>

<head>

<meta charset="UTF-8">

<meta name="Generator" content="EditPlus®">

<meta name="Author" content="">

<meta name="Keywords" content="">

<meta name="Description" content="">

<title>css的标记选择器</title>

<style type="text/css">

h1{

color:red;

font-size:25px;

}

</style>

</head>

<body>

<h1>css的标记选择器</h1>

</body>

</html>

（2）class类别选择器案例演示：

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<meta name="Generator" content="EditPlus®">

<meta name="Author" content="">

<meta name="Keywords" content="">

<meta name="Description" content="">

<title>css的类别选择器</title>

<style type="text/css">

.red{

color:red;

font-size:18px;

}
.green{color:green;

font-size:35px;

}
</style>

</head>

<body>
<p class="red">选择器1</p>
<p class="green">选择器2</p

<h3 class="green">h3同样适用</h3>
</body>

</html>

“<P>默认为正常粗细<h3>默认为粗体字”

（3）ID选择器案例演示：

<!doctype html>

<html >

<head>

<meta charset="UTF-8">

<meta name="Generator" content="EditPlus®">

<meta name="Author" content="">

<meta name="Keywords" content="">

<meta name="Description" content="">

<title>ID选择器</title>

<style type="text/css">

#bold{
font-weight:bold;
}
#green{font-size:20px;
color:#009900;
}

</style>

</head>

<body>

<p id="bold">ID选择器1</p>

<p id="green">ID选择器2</p>

<p id="green">ID选择器3</p>

<p id="bold green">ID选择器4</p>

<!-- 第四行没变化的原因是：将ID选择器用于多个标记是完全错误的语法，一个ID最多赋予一个html标记-->

</body>

</html>

3、在html中使用css的方法。
对css有了大致的了解后，就可以使用css对页面进行全方位的控制，接下来将会介绍如何在html中使用css,包括 行内样式、内嵌式、链接式、导入式等，然后再探讨各种方式的优先级问题。

（1）行内样式：
不推荐使用，行内样式是最为简单的css使用方法，但由于需要为每个标记设置style属性，，后期维护成本过高，而且网页更容易过胖，所以省略介绍。
（2）内嵌式：
内嵌式表：就是将css写在在<head>与</head>之间，并且用<style>和</style>标记进行声明。
<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="Generator" content="EditPlus®">

<meta name="Author" content="">

<meta name="Keywords" content="">

<meta name="Description" content="">

<title>内嵌样式表</title>

<style type="text/css">

p{color:red;

text-decoration:underline;

font-weight:bold;

font-size:25px;

}

</style>

</head>

<body>

<p>这是第一行正文内容......</p>

<p>这是第二行正文内容......</p>

<p>这是第三行正文内容......</p>

</body>

</html>

所有的css的代码部分被集中在同一个区域，仅适用于对特殊的页面设置单独的样式风格。


（3）链接式：
连接式是最为实用的，它将html页面本身与css样式风格分离为两个或者多个文件，实现了页面框架html代码与美工css的代码的完全分离，后期维护十分方便。

案列：
链接式样式表.html：
<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="Generator" content="EditPlus®">

<meta name="Author" content="">

<meta name="Keywords" content="">

<meta name="Description" content="">

<title>链接式</title>

<link href="01（链接式样式表）.css" type="text/css" rel="stylesheet">

</head>

<body>

<h2>css标题</h2>

<p>这是正文内容。。。。。</p>

<h2>css标题</h2>

<p>这是正文内容。。。。</p>

</body>

</html>

然后创建文件“01（链接式样式表）.css”其内容如下所示，保存文件时确保这个文件和上面的“链接式样式表.html”在同一个文件夹，否则href属性中需要带有正确的文件路径。
01（链接式样式表）.css：（可以任意规划属性）
h2{

color:red;

}

p{

color:blue;

text-decoraton:underline;

font-weight:bold;

font-size:20px;

}
链接式样式表的最大优势在于css代码与html代码完全分离，并且同一个css文件可以被不同的html链接使用。

（4）导入样式：
导入样式表与链接式样式表的功能基本相同，类似于内嵌式的效果，放在<style>与</style>标记之间。
案列：

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="Generator" content="EditPlus®">

<meta name="Author" content="">

<meta name="Keywords" content="">

<meta name="Description" content="">

<title>导入样式表</title>

<style type="text/css">

<!--

@import url(01（导入样式@import）.css);

@import url(02（导入样式@import）.css);

-->

</style>

</head>

<body>

<h2>css标题</h2>

<p>这是正文内容。。。。。</p>

<h2>css标题</h2>

<p>这是正文内容。。。。</p>

<h3>新增加的标题</h3>

<p>新增加的正文内容。。。。。</p>

</body>

</html>

然后创建文件“01（导入样式@import）.css ” 、“02（导入样式@import）.css ”其内容如下所示，保存文件时确保这个文件和上面的“导入样式.html”在同一个文件夹，否则href属性中需要带有正确的文件路径。

（1） 01（导入样式@import）.css
h2{

color:blue;

}

p{

color:red;

text-decoration:underline;

font-weight:bold;

font-size:15px;

}
（2）02（导入样式@import）.css ：

h3{

color:green;

font-style:italic;

font-size:40px;

}
导入样式表的最大用处在于让一个html文件导入很多的样式表。

（1）行内样式、内嵌式、链接式、导入式这四种css方式的优先级规则：（导入式和链接式统称为外部样式）

行内样式      <     嵌入式       <   外部样式

(2)外部样式中，出现在后面的优先级高于出现在前面的。

（4）css简单体验。

 

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>css初体验</title>
<style type="text/css">
h1{color:white;
background-color:blue;
text-align:center;
padding:15px;
}
img{
float:left;
border:1px; #gray dashed;
margin:5px;
}
p{
font-size:14px;
text-indent:2em;
line-height:1.5;
padding:5px;
}
body{
margin:0px;
background:gray;
}

img{
float:left;
border:1px #9999cc dashed;
margin:5px;
height:158;
width:158;
}

#p1{
border-right:3px red double;
}
#p2{
border-right:3px orange double;
}
</style>
</head>
<body>
<h1>互联网发展的起源</h1>
<img src="123.jpg" />
<p  id="p1">1968 年，美国国防部高级研究计划局组建了一个计算机网，名为 ARPANET（英文 Advanced Research Projects Agency Network 的缩写，又称“阿帕”网）。按央视的数据，新生的“阿帕”网获得了国会批准的 520 万美元的筹备金及两亿美元的项目总预算，是当年中国国家外汇储备的 3 倍。时逢美苏冷战，美国国防部认为，如果仅有一个集中的军事指挥中心，万一被苏联摧毁，全国的军事指挥将处于瘫痪状态，所以需要设计一个分散的指挥系统。它由一个个分散的指挥点组成，当部分指挥点被摧毁后其他点仍能正常工作，而这些分散的点又能通过某种形式的通信网取得联系。</p>
<p id="p2">1969 年，“阿帕”网第一期投入使用，有 4 个节点，分别是加利福尼亚大学洛杉矶分校、加利福尼亚大学圣巴巴拉分校、斯坦福大学以及位于盐湖城的犹它州州立大学。位于各个结点的大型计算机采用分组交换技术，通过专门的通信交换机（IMP）和专门的通信线路相互连接。一年后“阿帕”网扩大到 15 个节点。1973 年，“阿帕”网跨越大西洋利用卫星技术与英国、挪威实现连接，扩展到了世界范围。TCP/IP（Transmission Control Protocol/Internet Protocol）即传输控制协议 / 因特网协议，又名网络通信协议，是 Internet 最基本的协议、Internet 国际互联网络的基础，由网络层的 IP 协议和传输层的 TCP 协议组成（来源于百度百科）。TCP/IP 协议定义了电子设备如何连入因特网，以及数据如何在它们之间传输。从此，全球的通信设施用上了同一种语言。HTTP（Hypertext Transfer Protocol，超文本传送协议）则定义了 Web 客户端怎样向万维网服务器请求万维网文档，以及服务器怎样把文档传送给浏览器。HTTP 提供了访问超文本信息的功能，是 Web 浏览器和 Web 服务器之间的应用层通信协议。</p>
</body>
</html>

通过上面这个简单的实例可以体验出css所能够带来的优点、体验出css的设置方法，从中可以看出，基本的方法就是要通过选择器确定对哪个或哪些对象进行设置，然后通过对各种css属性进行适当的设置，实现对页面样式的全面控制。

css的核心思想：尽可能地使网页内容与形式分离。

使用css制作网页的一个基本的要求就是主流的浏览器之间的显示效果要基本一致。

以上内容出自http：//www.artech.cn

（1） css的核心基础的更多相关文章

  1. css核心基础总结篇

    今日这篇是整合前面的css补充知识的. 我觉得前面的关于css的知识补充进去有点乱,今日整理整理一下. 层叠样式表 层叠是什么意思?为什么这个词如此重要,以至于要出现在它的名称里. 层叠可以简单地理解 ...

  2. CSS 设计彻底研究（一）(X)HTML与CSS核心基础

    第1章 (X)HTML与CSS核心基础 这一章重点介绍了4个方面的问题.先介绍了 HTML和XHTML的发展历程以及需要注意的问题,然后介绍了如何将CSS引入HTML,接着讲解了CSS的各种选择器,及 ...

  3. css与js基础

    CSS样式 1 宽高设置 块元素可使用 wid 1字体 font-family :  文本类型 font-size     字体大小 font-style 字体样式 斜体italic   正常norm ...

  4. 【CSS简介、基础选择器、字体属性、文本属性、引入方式】前端小抄(2) - Pink老师自学笔记

    [CSS简介.基础选择器.字体属性.文本属性.引入方式]前端小抄(2) 本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处! 一.CSS简介 CSS 的主要使用场景就是布局网页,美化页面 ...

  5. Androd核心基础01

    Androd核心基础01包含的主要内容如下 Android版本简介 Android体系结构 JVM和DVM的区别 常见adb命令操作 Android工程目录结构 点击事件的四种形式 电话拨号器Demo ...

  6. css+js+html基础知识总结

    css+js+html基础知识总结 一.CSS相关 1.css的盒子模型:IE盒子模型.标准W3C盒子模型: 2.CSS优先级机制: 选择器的优先权:!important>style(内联样式) ...

  7. Android应用的核心基础

    Android4开发入门经典 之 第二部分:Android应用的核心基础 Android应用中的组件 Application Components Android应用中最主要的组件是: 1:Activ ...

  8. C#核心基础--类(2)

    C#核心基础--类的声明 类是使用关键字 class 声明的,如下面的示例所示: 访问修饰符 class 类名 { //类成员: // Methods, properties, fields, eve ...

  9. Servlet---JavaWeb技术的核心基础，JavaWeb框架的基石(一)

    初学JavaWeb开发,请远离各种框架,从Servlet开始.         Web框架是开发者在使用某种语言编写Web应用服务端是关于架构的最佳实践.很多Web框架是从实际的Web项目抽取出来的, ...

随机推荐

  1. 【转】 [C/OC的那点事儿]NSMutableArray排序的三种实现(依赖学生成绩管理系统).

    原文网址:http://blog.csdn.net/ministarler/article/details/17018839 c语言实现的学生成绩管理系统是面向过程的,而OC实现的学生成绩管理系统则是 ...

  2. linux下的加减运算

    命令: echo rep 如果你有些编程方面的概念,最有意思的是用gdb,它可以进行进制转换,浮点数运算,数据类型占用字节数等等,很方便. (gdb) p 2+5$21 = 7(gdb) p 2/5$ ...

  3. [转]linux之nl命令

    转自:http://www.cnblogs.com/peida/archive/2012/11/01/2749048.html nl命令在linux系统中用来计算文件中行号.nl 可以将输出的文件内容 ...

  4. ctype库试运行

    from ctypes import * msvcrt=cdll.msvcrt message_string="Hello world!\n" msvcrt.wprintf(&qu ...

  5. 传统企业，"哀兵必胜"的想法要不得

    [文/ 任英杰]同事在内网上发了一篇文章『哀兵必胜』,思量数日,作文应对.文中表达的积极精神让人敬佩,但背后似乎隐含着一股莫名的“情绪”.对行业大格局的基本看法会影响公司转型的成败,觉得还是有必要讨论 ...

  6. public static void main(String arg[])

      该语句定义了main方法. main方法是程序执行的入口,所有的java程序都必须具备一个main()方法,而且必须按照如上的格式来定义. 不具有main方法的类可以编译,但不能执行.因为它没有m ...

  7. Raspberry Pi上手

    2013-05-21 买的树莓派终于到手了,嘿嘿.我在官方代理ICKEY买的,是英国版,B型. 上手教程可以根据Getting Started with Raspberry Pi(网上有电子版免费下载 ...

  8. gson在java和json串之间的应用

    public class JsonToJavaUtil { /** * 将json转成成javaBean对象 * * @param <T> * 返回类型 * @param json * 字 ...

  9. HBase高性能复杂条件查询引擎---二级多列索引

    http://www.infoq.com/cn/articles/hbase-second-index-engine 原理 “二级多列索引”是针对目标记录的某个或某些列建立的“键-值”数据,以列的值为 ...

  10. HIve体系结构，hive的安装和mysql的安装，以及hive的一些简单使用

    Hive体系结构: 是建立在hadoop之上的数据仓库基础架构. 和数据库相似,只不过数据库侧重于一些事务性的一些操作,比如修改,删除,查询,在数据库这块发生的比较多.数据仓库主要侧重于查询.对于相同 ...