CSS学习（页外引用还不懂）
CSS的语法结构为 选择符 {属性：值；} Selector {Property : Value；}
选择符：通配 *{....} ， 元素 body{....} 、h1{....}、p{....} ， 群组 h1,h2,h3,p {....} 同时可一个给多个标签赋予相同的属性
关系选择符：包含 h1 a{....}
【一些基本属性：文字装饰text-decoration: 字体 font-family 字体颜色 color 字体大小font-size:px; 外边距margin 内边距padding】
CSS的引入方式用就近原则
行内引用 （直接在标签里写入style属性）
例如：<body style="background-color:#8484FF;">
<h1 style=" font-size:20px; font-family:仿宋;">在H1标签里写入style属性</h1>
<p style="font-size: 10px;">在P标签里写入style属性</p>
</body>
页内引用 （当单个文件需要特别样式时，就可以使用内部样式表）
定义单文件个在<head> 部分通过 <style>标签定义内部样式
例如： <head>
<style type="text/css">
body {
background-color:#cccccc;
}
</style>
</head>
<body>
<h1>这是一个H标签</h1>
<h1>这是一个H标签</h1>
</body>
页外引用
CSS的代码注释用 /* ~ */ 开始~结束 /*导航开始*/ #nav{....} /*导航结束*/
通配选择符用 *{....} 同时定义body里所有标签的样式
例如： <style>
*{
color:red;
font-family:仿宋;
}
</style>
</head>
<body>
<h1>标签</h1>
<p>第一个标签</p>
<p>第二个标签</p>
<p>第三个标签</p>
</body>
元素选择符用 body{....} ，h1{....}, p{....} 选择性定义body里的单个标签样式 （ 例如我选择性的定义b标签）
例如：<style>
b {
color:red;
font-family:仿宋;
}
</style>
</head>
<body>
<h1>标签</h1>
<b>第一个标签</b>
<p>第二个标签</p>
<p>第三个标签</p>
</body>
</html>
群组选择符 需要修改的标签进行挑选 例如：h1, h3, h6 {....} 选择性的定义body里的多个标签样式 （例如我选择性定义b和Pb标签，必须用逗号隔开）
例如：<style>
b,p {
color:red;
font-family:仿宋;
}
</style>
</head>
<body>
<h1>标签</h1>
<b>第一个标签</b>
<p>第二个标签</p>
<p>第三个标签</p>
</body>
</html>
关系选择符分为4种：1.包含选择符 一个标签被另一个标签所包含，包含关系不限包含层次（注意：多个选择符组成的包含选择符一定要使用空格隔开）
单用h1{....}h1标签是红色，单用em{....}p标签和h1标签的em是绿色，单用h1 em{....}则h1里面的em是绿色，p标签则没获得任何样式。
例如： <style>
h1{
color: red;
}
em{
color:green;
}
h1 em{
color: red;
}
</style>
</head>
<body>
<h1>标签</h1>
<b>第一个标签</b>
<p><em>第二个标签</em></p>
<p>第三个标签</p>
<h1>红色文字<em>绿色文字</em> 红色文字</h1>
</body>
</html>
CSS学习（页外引用还不懂）的更多相关文章
- css学习笔记（1）
为什么要重新学css,理由有很多,css这个小婊砸,接触至今已有三年,但真的说熟练恐怕不见得.特此,为了我的目标,开始重新整理css的知识,我希望,每一篇笔记都能有个例子,从而来巩固我的知识. 在学习 ...
- CSS学习总结（一）
不知道大家对CSS的印象是怎么样的呢?也许有些模糊,也许根本不清楚.其实它跟我们密切相关,一旦我们浏览网页,都在与它打交道.没有它,我们看不到现在如此丰富多彩的网页效果.那么它到底是什么呢?又该如何使 ...
- 说说CSS学习中的瓶颈
虽已数年,但未就学习专门写过文章,这回破处了.苍蝇不叮没有缝隙的鸡蛋,领导不做没有跟拍的表演,同样,想到写CSS学习的文章也是有原因的(虽然我的不少行为没有原因). 情景再现(尊重隐私,下面故事中人名 ...
- CSS学习中的瓶颈期深入分析
虽已数年,但未就学习专门写过文章,这回破处了.苍蝇不叮没有缝隙的鸡蛋,领导不做没有跟拍的表演,同样,想到写CSS学习的文章也是有原因的(虽然我的不少行为没有原因). 情景再现(尊重隐私,下面故事中人名 ...
- 算警示吧——此文来自张鑫旭（说说CSS学习中的瓶颈）
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2523 虽已数年,但未 ...
- CSS学习摘要-定位实例
CSS学习摘要-定位实例 注:全文摘自MDN-CSS定位实例 列表消息盒子 我们研究的第一个例子是一个经典的选项卡消息框,你想用一块小区域包括大量信息时,一个非常常用的特征.这包括含有大信息量的应用, ...
- CSS 学习手册
目录 CSS 简介 1.CSS 简介 CSS 概述 层叠次序 2.CSS 基础语法 CSS 语法 值的不同写法和单位 记得写引号 多重声明: 空格和大小写 3.CSS 高级语法 选择器的分组 继承及其 ...
- css学习归纳总结（三） 转
原文地址:css学习归纳总结(三) 为文档添加样式的三种方法 行内样式 行内样式是写在HTML标签的style属性里的,比如: <p style="font-size: 12px;fo ...
- css学习归纳总结
来源于:trigkit4 css学习归纳总结(一) 选择器的分组 CSS选择器分为 1.群组选择器 如:p, body, img, div{} 2.兄弟选择器 如:p + p { color:#f00 ...
随机推荐
- 细说C#中的系列化与反系列化的基本原理和过程
虽然我们平时都使用第三方库来进行系列化和反系列化,用起来也很方便,但至少得明白系列化与反系列化的基本原理. 注意:从.NET Framework 2.0 开始,系列化格式化器类SoapFormatte ...
- java虚拟机学习-慢慢琢磨JVM(2)
1 JVM简介 JVM是我们Javaer的最基本功底了,刚开始学Java的时候,一般都是从“Hello World”开始的,然后会写个复杂点class,然后再找一些开源框架,比如Spring,Hibe ...
- [原创]MongoDB_Sharding
Mongo Sharding:本示例搭建了三个副本集作为三个分片的sharding集群,其中master,slave,factershi三台同网段的内网主机.前期规划和原理分析省略,可根据具体配置推导 ...
- kafka 0.8.2 消息生产者 producer
package com.hashleaf.kafka; import java.util.Properties; import kafka.javaapi.producer.Producer; imp ...
- 你对SpringMvc是如何理解的？
SpringMVC工作原理 SpringMvc是基于过滤器对servlet进行了封装的一个框架,我们使用的时候就是在web.xml文件中配置DispatcherServlet类:SpringMvc工作 ...
- SQL写操作 设置内容 （数组转字符串）
SQL写操作 设置内容 (数组转字符串) SQL set内容 SQL操作数组转字符串 SQL写操作 set内容 (数组转字符串) [ 封装方法 ] function getSqlSet( $data ...
- 如何编写Hexo主题
完成一个Hexo的主题其实很简单,和写静态页面差不多,只是内容部分通过Hexo的变量去获取,而且Hexo还内置了一些辅助函数帮你快速方便地完成繁琐的处理. 起步 在写代码之前要先把项目结构搭建好,一个 ...
- socket聊天室（服务端）（多线程）（TCP）
#include<string.h> #include<signal.h> #include<stdio.h> #include<sys/socket.h&g ...
- Asp.Net Core-----简介与安装
Asp.Net Core简介 ASP.NET Core 是一个全新的开源.跨平台框架,可以用它来构建基于网络连接的现代云应用程序,比如:Web 应用,IoT(Internet Of Things,物联 ...
- java基础(五章)
一. 调试 步骤1:设置断点(不能在空白处设置断点) 步骤2:启动调试 步骤3:调试代码(F6单步跳过)笔记本Fn+F6(F5) 步骤4:结束调试 掌握调试的好处? l 很清晰的看到, ...