1、在html中引入css的方法

　　1.行内式

　　 行内式即在标记的style属性中设定CSS样式，这种方式本质上没有体现出CSS的优势，因此不推荐使用。　　

　　例如：<h1 style="属性名称:属性值;">这是一行文本/h1>

　　2.嵌入式

　　 嵌入式将对页面中各种元素的设置写在<head></head>之间。

　　例如：  <head>

　　　　　　　　<style type="text/css">

　　　　　　　　　　 h1{

　　　　　　　　　　　　color:white;

　　　　　　　　　　　　background-color:blue;

　　　　　　　　　　　　}

　　　　　　　　</style>

　　　　　　</head>

　　3.导入式

　　<style type="text/css">

　　　　@import"mystyle.css";        >>要有style标签，import引用

　　</style>

　　4.链接式

　　 和导入式差不多，都是引用外部样式表。导入式：先加载html在加载css。 链接式：同步加载

　　<head>

　　　　<link href="mystyle.css" rel="stylesheet" type="text/css" />          >>stylesheet样式表，rel指定你引入的是样式表

　　</head>

　　外部css样式表，后缀名为.css

　　@charset "UTF-8"         >>编码格式，"UTF-8"用于国际，"GBK"用于国内

　　/*css*/            >>css样式表的注释

　　p {

　　　　color:red;

　　　　background:silver;

　　　　}

　　h1 {

　　　　color:white;

　　　　font-size:25px;

　　　　}

　　...

　　5.标签选择器

　　一标签的名字作为css样式的名字，比如：h2，p

　　标签选择器会控制页面所有同类标签的样式，不能做到同样的标签显示不同的样式

　　6.类别选择器

　　在css样式表用"."声明，比如：.p1{...};     >>class可以多次引用

　　以标签的css属性为基础来做的一个选择器

　　<p class="p1">...</p>

　　7.ID选择器

　　在css样式表用"#"声明，比如：#p1{...};   >> id一个页面只可以使用一次

　　<p id="p1">...</p>　　

　　8.交集选择器

 <html>

     <head>

         <title>交集选择器</title>

         <style type="text/css">

             p{color:blue;}

             .class12{color:green;}

             p.class12{color:red;}

         </style>

     </head>

     <body>

         <p>p段落</p>

         <p class="class12">交集段落</p>    <!--只有是<p>标签并且class属性和交集处一样才能应用到交集的样式-->

         <h3 class="class12">h3段落</h3>    <!--这里不是<p>标签，所以应用的是类别选择器处的样式-->

     </body>

 </html>

　9.并集选择器

　　并集选择器用","隔开标签

 <html>

     <head>

         <title>并集选择器</title>

         <style type="text/css">

             p,h1,h4,a{color:silver;font-size:20px;}   <!--同时给多个标签添加样式-->

         </style>

     </head>

     <body>

         <p>p段落</p>

         <h1>h1段落</h1>

         <h4>h4段落</h4>

         <a href="#">超链接</a>

     </body>

 </html>

　　10.后代选择器

　　后代选择器用空格隔开，找父元素下的子元素的子元素添加样式

 <html>

     <head><title>后代选择器</title>

         <style type="text/css">

             ol,h1,p{font-size:50px;}

             ol li li{color:red;}

             ol li ul .class123{color:skyblue;}

             ol #id123{color:purple;}

             p b{color:blue;}

         </style>

     </head>

     <body>

         <ol>

             <li>无序列表

                 <ul>

                     <li>子列表</li>

                     <li class="class123">子列表</li>

                     <li>子列表</li>

                 </ul>

             </li>

             <li>无序列表</li>

             <li id="id123">无序列表</li>

         </ol>

         <h1>h1段落</h1>

         <p><b>加粗段落</b></p>

     </body>

 </html>

 css的层叠性：行内样式>ID样式>类别样式>标记样式

网页平面设计 CSS的更多相关文章

  1. 网页平面设计 HTML

    网页平面设计HTML基础 1.网页的基本元素:文字.图像.超链接 2.HTML的基本机构head.title.body三部分 <html> <head> <title&g ...

  2. 移动端网页 rem css书写

    移动端网页书写   css样式: @charset "utf-8";body,html{font-family: "微软雅黑";font-size:100px; ...

  3. 网页DIV+CSS布局和动画美化全程实例 (陈益材) 随书光盘

    网站的建站技术近几年得到迅速的发展,网页的布局与特效动画技术层出不穷,网站建设已经从简单的技术支持时代衍变到现在的视觉美化时代.但如何使设计的网页高人一筹,达到让人过目不忘的境界,如何追求以最简单的特 ...

  4. 利用wget 抓取 网站网页 包括css背景图片

    利用wget 抓取 网站网页 包括css背景图片 wget是一款非常优秀的http/ftp下载工具,它功能强大,而且几乎所有的unix系统上都有.不过用它来dump比较现代的网站会有一个问题:不支持c ...

  5. 网页布局 CSS实现DIV并列等高

    同事去笔试遇到的问题 要求3列div根据内容的变化通过css实现等高 效果图: 原理: 同列的div设置一个父级 overflow:hidden 超出部分隐藏 给同列的div设置css margin- ...

  6. 《网页设计基础——CSS常用语法》

    网页设计基础--CSS常用语法       一.注释: 例如: /* 在此处书写注释 */     二.清除浏览器默认设置: 例如: *{ /* 全局声明 */ margin: 0; padding: ...

  7. 《网页设计基础——CSS的四种引入方式详解》

    网页设计基础--CSS的四种引入方式详解     一.行内式:   规则: 1. 行内式是所有样式方法中最为直接的一种,它直接对HTML的标记使用style属性,然后将CSS代码直接写在其中.   格 ...

  8. HTML 网页特效CSS大全

    css属性代码大全一CSS文字属性:color : #999999; /* 文字颜色*/font-family : 宋体,sans-serif; /* 文字字体*/font-size : 9pt; / ...

  9. 第一节 HTML网页和CSS样式

    1. 第一行 <!DOCTYPE html> 表明网页使用的是HTML5版本 2. 网页的head内容,包含了 title,meta. 3. 网页的标题 title,注意这个显示在浏览器的 ...

随机推荐

  1. python代码中pass的用法

    我们有时会在方法中写一些注释代码,用来提示这个方法是干嘛的之类,看下面代码: class Game_object: def __init__(self, name): self.name = name ...

  2. Neutron数据库同步错误 NotImplementedError: No support for ALTER of constraints in SQLite dialect

    错误信息 root@controller:~# su -s /bin/sh -c "neutron-db-manage --config-file /etc/neutron/neutron. ...

  3. Windows消息传递函数SendMessage参数属性

    Windows消息传递函数SendMessage参数属性 转载于:http://www.cr173.com/html/5605_1.html Windows是一个消息驱动式系统,SendMessage ...

  4. javascript高级知识分析——灵活的参数

    代码信息来自于http://ejohn.org/apps/learn/. 使用数量可变的参数对编程很有好处 function merge(root){ for(i = 0 ; i < argum ...

  5. php获取post参数的几种方式

    php获取post参数的几种方式 1.$_POST['paramName'] 只能接收Content-Type: application/x-www-form-urlencoded提交的数据 2.fi ...

  6. 关于用 random 生成伪随机数的一个手笔

    我在想还要不要写什么文字.确实不需要太多的文字描述吧. 前奏插一个小话题,之前在网上看到这样的冷笑话(有图的),一个程序猿调试个程序,早上怀疑某某地方的错误,下午怀疑某某地方的错误,晚上怀疑某某地方可 ...

  7. kafka 使用、介绍

    kafka  是一个消息系统, 具体资料可以参考官网: BrokerKafka集群包含一个或多个服务器,这种服务器被称为broker Topic每条发布到Kafka集群的消息都有一个类别,这个类别被称 ...

  8. 关于NGINX下开启PHP-FPM 输出PHP错误日志的设置(已解决)

    最近在本地搭建的LNMP的开发环境.为了开发的时候不影响前端的正常开发就屏蔽的PHP里面php.ini中的一些错误提示.但是这样一来,就影响到了后端开发的一些问题比如不能及时调试开发中的一些问题. n ...

  9. GoF——组合模式

    组合模式:将对象组合成树形结构以表示“部分-真题”的结构层次.组合模式使得用户对单个对象和组合对象的使用具有一致性. 结构图: using System; using System.Collectio ...

  10. 使QQ窗口八字形转圈

    //先有思路 后有代码 总是不知不觉中乱敲一通 今天做个标记 感谢老师课堂上的讲解#include <stdio.h> #include <math.h> #include & ...