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作为主流的开发语言得到了前所未有的热捧.大量的前端框架出现了,这些框架都在尝试着解决一 些前端开发中的共性问题,但是实现又不尽相同.通常一般的前端加 ...
随机推荐
- WP_Image_Editor_Imagick 漏洞临时解决方法
导读 阿里云推送的一条短信通知:存放在上面的WordPress程序有WP_Image_Editor_Imagick漏洞问题,需要登入后台补丁等等的暗示.当然,如果需要在线补丁则需要升级阿里云的安骑士专 ...
- IOS APP的所有图标尺寸规范
转自: http://blog.csdn.net/chonbj/article/details/25133247 像我一样记不住iOS应用图标像素尺寸的开发者不在少数,我经常需要查询不同设备上的应用尺 ...
- ruby开发过程中的小总结
(1)建表的时候注意保留字 在新建的表里无法插入一列的值, 报错信息是:Can't mass-assign protected attributes,这一列的列名是type,查了一下发现是因为type ...
- PHP 遍历目录
$dir = $_SERVER['DOCUMENT_ROOT'].'/test'; //var_dump($dir);exit; function my_scandir($dir) { $files ...
- iOS CALayer动画中使用的3个tree
在网上经常看到关于layer的tree的描述,不太理解,今天找到了官方文档,原文在Core Animation Programming Guide 中. Layer Trees Reflect Dif ...
- BestCoder9 1003 Revenge of kNN(hdu 4995) 解题报告
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4995 题目意思:在一个一维坐标轴上,给出位置 xi 和值 vi,对于 M 次询问,每次询问给出inde ...
- codeforces A. Sereja and Bottles 解题报告
题目链接:http://codeforces.com/problemset/problem/315/A 题目意思:有n个soda bottles,随后给出这n个soda bottles的信息.已知第 ...
- border-box
box-sizing属性可以为三个值之一:content-box(default),border-box,padding-box. content-box,border和padding不计算入wi ...
- ThreadGroup分析
本文为转载:http://sunboyyyl.blog.163.com/blog/static/2247381201211531712330/ 在Java中每一个线程都归属于某个线程组管理的一员,例如 ...
- delete 类对象指针的注意事项]
http://blog.csdn.net/infoworld/article/details/45560219 场景:1. C++类有构造和析构函数,析构函数是在类对象被delete时(或局部变量自动 ...