网页平面设计 CSS

1、在html中引入css的方法

　　1.行内式

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

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

　　2.嵌入式

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

　　例如： <head>

　　　　　　　　　　 h1{

　　　　　　　　　　　　color:white;

　　　　　　　　　　　　background-color:blue;

　　　　　　　　　　　　}

　　　　　　　　</style>

　　　　　　</head>

　　3.导入式

　　　　@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属性为基础来做的一个选择器

　　7.ID选择器

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

　　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的更多相关文章

网页平面设计 HTML
网页平面设计HTML基础 1.网页的基本元素:文字.图像.超链接 2.HTML的基本机构head.title.body三部分 <html> <head> <title&g ...
移动端网页 rem css书写
移动端网页书写 css样式: @charset "utf-8";body,html{font-family: "微软雅黑";font-size:100px; ...
网页DIV+CSS布局和动画美化全程实例 (陈益材) 随书光盘
网站的建站技术近几年得到迅速的发展,网页的布局与特效动画技术层出不穷,网站建设已经从简单的技术支持时代衍变到现在的视觉美化时代.但如何使设计的网页高人一筹,达到让人过目不忘的境界,如何追求以最简单的特 ...
利用wget 抓取网站网页包括css背景图片
利用wget 抓取网站网页包括css背景图片 wget是一款非常优秀的http/ftp下载工具,它功能强大,而且几乎所有的unix系统上都有.不过用它来dump比较现代的网站会有一个问题:不支持c ...
网页布局 CSS实现DIV并列等高
同事去笔试遇到的问题要求3列div根据内容的变化通过css实现等高效果图: 原理: 同列的div设置一个父级 overflow:hidden 超出部分隐藏给同列的div设置css margin- ...
《网页设计基础——CSS常用语法》
网页设计基础--CSS常用语法一.注释: 例如: /* 在此处书写注释 */ 二.清除浏览器默认设置: 例如: *{ /* 全局声明 */ margin: 0; padding: ...
《网页设计基础——CSS的四种引入方式详解》
网页设计基础--CSS的四种引入方式详解一.行内式: 规则: 1. 行内式是所有样式方法中最为直接的一种,它直接对HTML的标记使用style属性,然后将CSS代码直接写在其中. 格 ...
HTML 网页特效CSS大全
css属性代码大全一CSS文字属性:color : #999999; /* 文字颜色*/font-family : 宋体,sans-serif; /* 文字字体*/font-size : 9pt; / ...
第一节 HTML网页和CSS样式
1. 第一行 <!DOCTYPE html> 表明网页使用的是HTML5版本 2. 网页的head内容,包含了 title,meta. 3. 网页的标题 title,注意这个显示在浏览器的 ...

随机推荐

poj1207
The 3n + 1 problem Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 50513 Accepted: 15 ...
Python学习笔记8-类的继承、深度优先、广度优先
Python 类声明语法: class 类名: 类体例: #--encoding:utf-8-- # class AddressBookEntity: myVersion=0.1 def __in ...
#include <strstream>
std::ostrstream MYOUT(str, sizeof(str)); 拼接字符串 #include <iostream> #include <strstream> ...
javascript数组去重算法-----3
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
AutoResetEvent和ManualResetEvent
本文在于巩固基础 AutoResetEvent 概念:通知正在等待的线程已发生的事件如果AutoResetEvent 为非终止状态,则线程会被阻止,并等待当前控制资源的线程通过调用 Set 来通知资 ...
蓝桥杯算法训练<二>
一.最小乘积(基本型)[这个题需要认真阅读试题,内容量较大,刚开始的时候,由于练习系统上给出的输入输出的格式有问题,没看懂,最后在MikCu的博客上看到了正确的格式,参考了代码,最终得到正确的结果.为 ...
VB.NET函数——数学函数/字母串函数
一.数学函数函数说明 Abs (num) 取绝对值. Exp (num) 返回以e为底.以num为指数的值,如Exp(2)返回e^2值. Log (num) 返回参数num的自然对数值,为Doub ...
linux循环递归设置权限
这里给出一个循环递归得到对文件夹和文件分别有效的设置方法: find /path -type f -exec chmod 644 {} \; #对目录和子目录里的文件 find /path -type ...
关于上次我写的那个ATM程序，程序没有什么错，但是有些麻烦，两个类中有好多成员函数重复，因此我把ATM重新写了一边。
不好意思!但是现在这个程序比上次那个好多了,而且没有重复,程序看起来比较简练,以下是新程序: #include<iostream>#include<string>using n ...
Java 工厂模式学习
工厂模式分三种:简单工厂.工厂方法.抽象工厂.其中抽象工厂是用于多个产品族的情况.所谓产品族就是不同产品组成的有机整体,各不同产品之间相互依赖.打个比方,一台电脑有CPU.主板.内存和硬盘等,这些不同 ...

网页平面设计 CSS

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

随机推荐

热门专题