css的引入方法2
id 方法精确
#div1 {
font-size:30px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<meta charset="utf-8" />
<title>css给网页装潢</title>
<style type="text/css">
#div1 {
font-size:30px;
}
</style>
</head>
<body>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<div id="div1">diyihgsddg</div>
<div>diyihgsddg</div>
<div>diyihgsddg</div>
<div>diyihgsddg</div>
</body>
</html>
class 按类
.red {
color:red;
}
<html>
<head>
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<meta charset="utf-8" />
<title>css给网页装潢</title>
<style type="text/css">
.red {
color:red;
}
.size40{
font-size:40px;
} </style>
</head>
<body>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p class="red">段落</p>
<div class="red">diyihgsddg</div>
<div class="red size40">diyihgsddg</div>
<!--class嵌套-->
<div>diyihgsddg</div>
<div>diyihgsddg</div>
</body>
</html>
标签选择：div,p不精确，面广
<html>
<head>
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<meta charset="utf-8" />
<title>css</title>
<style type="text/css">
div {
color:red;
}
p {
font-size:50px;}
</style>
</head>
<body>
<p>111111111111</p>
<p>222222222222</p>
<p>333333333333</p>
<p>555555555555</p>
<div>diyihgsddg</div>
<div>diyihgsddg</div>
<div>diyihgsddg</div>
<div>diyihgsddg</div>
</body>
</html>
交集选择
div.red {
color:red;
}
<html>
<head>
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<meta charset="utf-8" />
<title>css给网页装潢</title>
<style type="text/css">
div.red {
color:red;
}
</style>
</head>
<body>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p class="red">段落</p>
<div class="red">diyihgsddg</div>
<div class="red size40">diyihgsddg</div>
<div>diyihgsddg</div>
<div>diyihgsddg</div>
</body>
</html>
并集选择器
div,p,li{
color:green;
font-size:30px;
}
<html>
<head>
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<meta charset="utf-8" />
<title>css给网页装潢</title>
<style type="text/css">
div,p,li{
color:green;
font-size:30px;
}
</style>
</head>
<body>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<div>diyihgsddg</div>
<div>diyihgsddg</div>
<div>diyihgsddg</div>
<ul><li>123</li><li>456</li></ul>
</body>
</html>
子后代关系
<html>
<head>
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<meta charset="utf-8" />
<title>css给网页装潢</title>
<style type="text/css">
div p{
color:green;}
</style>
</head>
<body>
<div>
<p>我是div里面的p</p>
<p>我是div里面的p</p>
<p>我是div里面的p</p>
</div>
</body>
</html>
后代的后代
<html>
<head>
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<meta charset="utf-8" />
<title>css给网页装潢</title>
<style type="text/css">
div p{
color:green;}
div li{
color:yellow;}
</style>
</head>
<body>
<div>
<p>我是div里面的p</p>
<p>我是div里面的p</p>
<p>我是div里面的p</p>
</div>
<div>
<ul>
<li>123456</li>
<li>123456</li>
</ul>
</div>
</body>
</html>
伪类 a:hover鼠标放上去变色
<html>
<head>
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<meta charset="utf-8" />
<title>css给网页装潢</title>
<style type="text/css">
a:hover{color:red;}/*hover鼠标放上去变色*/
</style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
</body>
</html>
*通配选择器 选中所有元素
<html>
<head>
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<meta charset="utf-8" />
<title>css给网页装潢</title>
<style type="text/css">
*{
font-size:30px;}
</style>
</head>
<body>
<p>aaaaaaaaaaaaaaaaaaa</p>
<p>aaaaaaaaaaaaaaaaaaa</p>
<a href="http://www.baidu.com">百度</a>
</body>
</html>
body继承 类似于*
<html>
<head>
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<meta charset="utf-8" />
<title>css给网页装潢</title>
<style type="text/css">
body{
font-size:30px;}
</style>
</head>
<body>
<p>aaaaaaaaaaaaaaaaaaa</p>
<p>aaaaaaaaaaaaaaaaaaa</p>
<a href="http://www.baidu.com">百度</a>
</body>
</html>
css的引入方法2的更多相关文章
- CSS基础-引入方法，选择器，继承
一.CSS引入方法:行内式.嵌入式.导入式.链接式. 1.行内式. 即:在标签的style属性中设定CSS样式. 例子:<div style="行内式</div> 2.嵌入 ...
- css的引入方法
1.外部途径: 建立xx.css文件与html文件放在同一目录下 加入 <link rel="stylesheet" type="text/css" hr ...
- 阿里字体css代码引入方法
1.第一步,选择自己想要的图标字体,添加入库. 2.选择下载代码. 3.我们可以发现,有如下的代码被下载下来了. 4.我们选择iconfont.css放到自己的文件夹中. 5.然后我们根据下载下来ht ...
- iOS之在webView中引入本地html,image,js,css文件的方法 - sky//////////////////////////////////////ZZZZZZZZZZZZZZZ
iOS之在webView中引入本地html,image,js,css文件的方法 2014-12-08 20:00:16CSDN-sky_2016-点击数:10292 项目需求 最近开发的项 ...
- 标签种类及CSS引入方法
标签种类及CSS引入方法 标签种类: 一:块级标签(block) ——> 独占一行,默认宽度与内容无关,宽高可设 (hr 块级标签) 二:行内块标签(inline-block) ——> ...
- CSS——三种页面引入方法
目的:为了把样式和内容分开,并且使网页元素更加丰富,引入了CSS CSS页面引入有三种方式: 1)内联式:比较不常用,因为内容和样式仍然在一起,不方便.示例: <!DOCTYPE html> ...
- laravel V层引入css 和js方法
引入css 默认引入public目录 <link rel="stylesheet" href="{{URL::asset('css/xxx.css')}}&quo ...
- css_三种引入方法
CSS是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化. 详请:http://www.w3school.com.cn/h.asp 其存在方式有三种:元素内联 ...
- require.js配置路径的用法和css的引入
前端开发在近一两年发展的非常快,JavaScript作为主流的开发语言得到了前所未有的热捧.大量的前端框架出现了,这些框架都在尝试着解决一 些前端开发中的共性问题,但是实现又不尽相同.通常一般的前端加 ...
随机推荐
- Maven 安装以及一些开发技巧
解压 apache-maven-3.2.5 在conf ->sites中配置repository 的路径. Eclipse 配置 maven 2. 3. 一些小BUG 或开发技巧 eclipse ...
- Internet信息服务找不到
最近我的电脑也出现了Internet信息服务找不到的情况,在网络上查了很多方法都没一个正确的,后面通过下面的方法我成功了,故此我把这个经历也分享给大家,希望能够帮到您. 控制面板里“->添加/删 ...
- Java之内存分析和String对象
原文地址:http://www.cnblogs.com/devinzhang/archive/2012/01/25/2329463.html 文中 s2后面的注释是错误的,应该是”创建一个对象(堆中) ...
- [Effective JavaScript 笔记] 第13条：使用立即调用的函数表达式创建局部作用域
function wrapElements(a){ var res=[],i,n; for(i=0,n=a.length;i<n;i++){ res[i]=function(){return a ...
- lvs之ip-tun(ip隧道)技术的学习与实践
1.配置测试环境 修改IP windows 200.168.10.4 lvs server ip:200.168.10.1 因为IP隧道模式只需要一个网卡 所以就停掉其他网卡 web server ...
- MySQL目录
MySQL的学习总结目录 Mysql5.7安装及配置 教你如何3分钟玩转MYSQL MySQL使用详解--根据个人学习总结 Mysql增删改 Mysql_以案例为基准之查询 MySQL之扩展(触发器, ...
- cookie注入的形成,原理,利用总结
一:cookie注入的形成 程序对提交数据获取方式是直接request("c.s.t")的方式.未指明使用request对象的具体方法进行获取. 二:原理 request(&quo ...
- Largest Divisible Subset
Given a set of distinct positive integers, find the largest subset such that every pair (Si, Sj) of ...
- asp.net文本编辑器FCKeditor使用方法详解
文本编辑器的使用: 1.FCKeditor的官方网站是:http://www.fckeditor.net/download 目前最新的FCKeditor.Net_2.6.9版本. 请在此页下载:ht ...
- 72 [面试题]如果不使用if-else和比较运算符，你知道如何求解2个数字中的较大一个吗？
[本文链接] http://www.cnblogs.com/hellogiser/p/max-of-numbers-without-comparations.html [题目] 不使用if-else和 ...