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作为主流的开发语言得到了前所未有的热捧.大量的前端框架出现了,这些框架都在尝试着解决一 些前端开发中的共性问题,但是实现又不尽相同.通常一般的前端加 ...
随机推荐
- [Effective JavaScript 笔记] 第6条：了解分号插入的局限
分号可以省略 js可以在语句结束不强制加分号.(建议还是添加,不添加分号往往会出现不易发现的BUG) function Point(x,y){ this.x=x||0; this.y=y||0; } ...
- 腾讯即时聊天sdk
一. 初始化 腾讯即时通讯sdk 1. 程序日志注册 2. 连接通知回调 专门的类管理 3. 信息通知回调 专门的类 4. 初始化sdk 5. 注册推送 分ios8/ios以前 注册推送成功回调 发 ...
- ruby Errors & Exceptions
When you first started coding, errors were probably the last thing you wanted to see. After all, it’ ...
- Struts2配置文件模板
<?xml version = "1.0" encoding = "UTF-8"?><!--下面是Struts2配置文件的DTD信息 --&g ...
- php如何将数组保存为文件的方法？ 三个方法让你快速把数组保存成为文件存储
php 缓存数组形式的变量,实际上就是将 php 将数组写入到一个文本文件或者后缀名为 .php 存储起来,使用的时候直接调用这个文件.那么如何使用 php 将数组保存为文本格式的文件呢?下面分享三种 ...
- Ubuntu及Windows ADB设备no permissions的解决方案
不少人曾在Windows下及Ubuntu下都遇到过Android设备无法识别的情况,就是run as Android Application的时候,target显示"??????" ...
- 【python】linux将python改为默认3.4版本
Python3.4默认是安装在/usr/local/lib/python3.4目录下,需要删除默认python link文件,重新建立连接关系. 使用ln -s命令来修改,命令如下: sudo rm ...
- ipconfig 无效
刚刚配置了很多的环境变量后,在命令行下输入ipconfig后无效了 于是在环境变量PATH底下再次加入了;C:\WINDOWS\system32; 从新运行ipconfig,问题解决
- Redis笔记（一）Redis简介
关于Redis Redis是一款开源的高性能键值对数据库,最初的作者是意大利的Salvatore Sanfilippo,他的github是 antirez ,Redis的源码同样托管在Git上:htt ...
- SQL如何在数据库间复制表
方法一: DB1 tb1 DB2 tb2 选择DB1 到表的列表那里选择tb1表 右键 所有任务 数据导出 下一步 选择你要导出的数据库DB1 下一步 选择你要导入的数据库DB2 下一步 选 ...