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作为主流的开发语言得到了前所未有的热捧.大量的前端框架出现了,这些框架都在尝试着解决一 些前端开发中的共性问题,但是实现又不尽相同.通常一般的前端加 ...
随机推荐
- Apache prefork 模块指令分析
问题背景: 在一台只有内存的vps上安装directadmin之后经常内存耗,经过查看之后发现Apache成了罪魁祸首急速消耗内存SWAP剩余空间都是0,最终导致内核开始大下杀手,把MySQL都杀了, ...
- Python打包程序
到py2exe的官网下载程序,注意对应的python版本,比如所用的python版本为2.7,那么就下载适配2.7版本的py2exe软件 下载完成后安装(与普通软件安装方式相同) 2 将要转换的pyt ...
- Linux中常用的查看系统信息的命令
导读 Linux是一个神奇而又高效的操作系统,学完Linux对Linux系统有一个熟悉的了解后,你需要了解下这些实用的查看系统信息的命令. 查看系统版本命令 uname 谈到系统版本就一定会想到una ...
- 发现Select等注入语句自动跳转Code
CODE区域: <?php $str = $_GET["keyword"]; $str00 = strtolower($str); //strtolower 变为小写函数 $ ...
- SQL注入--宽字节注入
PHP测试代码: <?php // 面向对象写法 $id=addslashes($_GET[‘id’]); //获取id并转义预定义字符 // /$id=$_GET[‘id’]; $mysqli ...
- Delphi与C语言类型转换对照
When converting C function prototypes to Pascal equivalent declarations, it's important to substitut ...
- lucas定理，组合数学问题
对于C(n, m) mod p.这里的n,m,p(p为素数)都很大的情况.就不能再用C(n, m) = C(n - 1,m) + C(n - 1, m - 1)的公式递推了. 这里用到Lusac定理 ...
- HDOJ并查集题目 HDOJ 1213 HDOJ 1242
Problem Description Today is Ignatius' birthday. He invites a lot of friends. Now it's dinner time. ...
- vs2010 调试快捷键
vs2010 调试快捷键 命令名 快捷键 说明 调试.应用代码更改 Alt + F10 启动生成操作,利用它可以通过“编辑并继续”功能应用对正在调试的代码所作的更改. 调试.自动窗口 Ctrl + ...
- 【JAVA、C++】LeetCode 019 Remove Nth Node From End of List
Given a linked list, remove the nth node from the end of list and return its head. For example, Give ...