div+css小案例
来源：互联网 发布：腾讯云计算数据中心 编辑：程序博客网 时间：2024/04/23 17:44
demo.html
<html><head><title>这是个css体验例子</title><!--引入CSS--><link rel = "stylesheet" type = "text/css" href = "my.css"/></head><div class = "style"><img src = "2.png"></div></html>
my.css
.style{/*宽度*/width:400px;/*一定要有分号*/height:300px;background-color: silver;border:1px solid red;margin-left:400px;margin-top:250px;padding-top:20px;padding-left:40px;}
为了让栏目一到栏目五格式统一，只需要修改class对应的名字。
demo2.html
<html><!--css部分可以单写一个文件，然后引用，也可以直接嵌入到html文件中--><link rel = "stylesheet" type = "text/css" href = "demo2.css"/><body><!--通常用于存放小块内容--><span class = "s1">栏目一</span><span class = "s1">栏目二</span><span class = "s1">栏目三</span><span class = "s1">栏目四</span><span class = "s1">栏目五</span></body></html>
demo2.css
/*s1 类选择器*/.s1{color:blue;font-size:30px;font-style:italic;text-decoration:underline;}.s2{color:yellow;font-size:12px;}.s3{color:blue;font-style:italic;}.s4{color:green;font-weight:bold;}.s5{color:#F89582;}
如何在html中直接嵌入css，图片使用滤镜效果。
<html><head><!--如何把css直接嵌入到html文件内--><style type = "text/css">a:link img{filter:gray;}a:hover img{filter:"";}</style></head><body><a href = "3"><img src = "跑车.jpg" width = "200px"/></a><a href = "3"><img src = "2.png"/></a><a href = "3"><img src = "3.png"/></a></body></html>
类选择器格式：
.类选择器名{
属性名：属性值；
……
}
id选择器
#id{
属性名：属性值；
……
}
html选择器
html元素{
属性名：属性值；
……
}
通配符选择器（用星号表示），作用于所有的html元素，但是优先级别最低
*{
属性名：属性值;
……
}
四个选择器优先级别：
id选择器 > class选择器 > html选择器 > 通配符选择器
select.css
.s1{background-color:pink;font-weight:bold;font-size:30px;color:black;}/*id*/#id1{background-color:silver;font-size:40px;color:black;}/*html选择器*/body{color:orange;}<html><link rel = "stylesheet" type = "text/css" href = "select.css"><body>北京您好。<span class = "s1">新闻一</span><span class = "s1">新闻二</span><span class = "s1">新闻三</span><span class = "s1">新闻四</span><br/><br/><span id = "id1">这是一则非常重要的新闻</span></body></html>
html选择器的优先级低于类选择器和id选择器
假如对于两个不同段落需要不同的格式，但是都用同样的元素<p></p>
在CSS里面用p.类名 来区分，在html里面用class = “类名” 来引用格式
p.cls1{color:blue;font-size:30px;}p.cls2{color:red;font-size:20px;}<p class = "cls1">hellow world</p><p class = "cls2">hello world</p>
父子选择器：
1 可以有多级（实际中最多不超过三级）
2 父子选择器有严格的层级关系
css
/*父子选择器*/#id1 span{color:red;font-style:italic;}#id1 span span{color:green;}#id1 span span a{color:blue;}html
<span id = "id1">这是一则<span>非常<span>重<a href = "http://www.baidu.com">链接到百度</a></span>要</span>的新闻</span><br/>
- div+css小案例
- DIV+CSS案例1
- DIV+CSS案例2
- div+css综合案例
- DIV+CSS入门案例
- css小案例 小demo
- html-div-css案例1
- html-div-css案例2
- DIV+CSS左中右布局案例
- css+div小知识点
- HTML+CSS小实战案例
- div+CSS兼容小摘
- div+CSS 兼容小摘
- css+div 列表小三角
- CSS+div 一些小语法
- DIV+CSS 案例视频教程（免费的）
- DIV+CSS上中下布局案例
- DIV+CSS上中下左中右布局案例
- 百度之星冬季赛第一场
- HDFS Federation(HDFS 联盟)介绍
- （转）Oracle11g下UTL_TCP包居然用不通了调研
- Hdu 1286 找新朋友
- tomcat6.0绿色版 环境变量配置
- div+css小案例
- python笔记：简单的查找与排序算法
- java中对字符串的一些简单操作
- 使用postmessage发送自定义消息
- POJ3615 跨栏最大高度（多源最短路径）
- dbus 例程
- 打印更精准激光3D打印机问世
- Shell Script 提取文件名和文件扩展名的方法
- C++的性能检测
