CSS学习（一）
来源：互联网 发布：脑图软件 mac 编辑：程序博客网 时间：2024/05/19 12:26
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<!--窗口标题-->
<title>CSS练习1</title>
<!--内联>内嵌>外部-->
<!--外部式CSS样式-->
<link rel="stylesheet" type="text/css" href="styles.css">
<!--嵌入式方式CSS样式-->
<style type="text/css">
p{
font-size: 20PX;/*设置文字字号*/
color: red;/*设置字体颜色*/
font-weight: bold;/*设置字体加粗*/
}/*权值是1*/
/*权重一样时，根据CSS样式的前后顺序来决定，最后的CSS样式会被应用*/
span{
color: blue;
}
p{color:red!important;}/*权重值高于用户自己设置的样式*/
.stress{color: red;}/*类选择器，权值是10*/
.setGreen{color: green;}/*类选择器*/
#id{color: pink;}/*ID选择器，权值是100*/
.bigsize{font-size: 25px;}/*类选择器*/
.food>li{border: 1px solid red;}/*子选择器，对food类下第一级子元素li进行样式设置*/
.food1 li{border: 1px solid red;}/*子选择器，对food类下所有子元素li进行样式设置*/
* {font-size: 20px}/*通用选择器，将所有字体都进行样式设置*/
a:hover{color:green;}/*伪类选择器，给html不存在的标签（标签状态）设置样式，比如一个标签鼠标滑过的状态*/
h1,span{color:red;}/*分组选择符，用于对多个元素设置通以个样式*/
</style>
</head>
<body>
<p>
结合style显示文本的样式
</p>
<span>结合style显示span样式</span>
<!--内联CSS样式-->
<p>在HTML标签中<span style="color:green">内联CSS样式</span><span>此处采用嵌入式span样式</span></p>
<p>结合外部CSS样式显示span样式<span>此处采用外部CSS样式</span></p>
<p>结合类样式<span class="stress">此处采用类选择器</span><span class="setGreen">此处采用另外一个类选择器</span><span id="id">此处采用ID选择器</span></p>
<p>
类选择器和ID选择的区别：<br>
1、ID选择器只能在一个HTML文档中使用一次，而类选择器可以使用多次。<br>
2、类选择器可以使用词列表方法为一个元素同时设置多个样式，而ID选择不可以。<br>
<span class="stress bigsize">词列表</span>
</p>
<ul class="food">
<li>水果</li>
<ul>
<li>苹果</li>
<li>香蕉</li>
</ul>
<li>蔬菜</li>
<ul>
<li>青菜</li>
<li>白菜</li>
</ul>
</ul>
<ul class="food1">
<li>水果</li>
<ul>
<li>苹果</li>
<li>香蕉</li>
</ul>
<li>蔬菜</li>
<ul>
<li>青菜</li>
<li>白菜</li>
</ul>
</ul>
<a href="www.imooc.com">伪选择器</a>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<!--窗口标题-->
<title>CSS练习1</title>
<!--内联>内嵌>外部-->
<!--外部式CSS样式-->
<link rel="stylesheet" type="text/css" href="styles.css">
<!--嵌入式方式CSS样式-->
<style type="text/css">
p{
font-size: 20PX;/*设置文字字号*/
color: red;/*设置字体颜色*/
font-weight: bold;/*设置字体加粗*/
}/*权值是1*/
/*权重一样时，根据CSS样式的前后顺序来决定，最后的CSS样式会被应用*/
span{
color: blue;
}
p{color:red!important;}/*权重值高于用户自己设置的样式*/
.stress{color: red;}/*类选择器，权值是10*/
.setGreen{color: green;}/*类选择器*/
#id{color: pink;}/*ID选择器，权值是100*/
.bigsize{font-size: 25px;}/*类选择器*/
.food>li{border: 1px solid red;}/*子选择器，对food类下第一级子元素li进行样式设置*/
.food1 li{border: 1px solid red;}/*子选择器，对food类下所有子元素li进行样式设置*/
* {font-size: 20px}/*通用选择器，将所有字体都进行样式设置*/
a:hover{color:green;}/*伪类选择器，给html不存在的标签（标签状态）设置样式，比如一个标签鼠标滑过的状态*/
h1,span{color:red;}/*分组选择符，用于对多个元素设置通以个样式*/
</style>
</head>
<body>
<p>
结合style显示文本的样式
</p>
<span>结合style显示span样式</span>
<!--内联CSS样式-->
<p>在HTML标签中<span style="color:green">内联CSS样式</span><span>此处采用嵌入式span样式</span></p>
<p>结合外部CSS样式显示span样式<span>此处采用外部CSS样式</span></p>
<p>结合类样式<span class="stress">此处采用类选择器</span><span class="setGreen">此处采用另外一个类选择器</span><span id="id">此处采用ID选择器</span></p>
<p>
类选择器和ID选择的区别：<br>
1、ID选择器只能在一个HTML文档中使用一次，而类选择器可以使用多次。<br>
2、类选择器可以使用词列表方法为一个元素同时设置多个样式，而ID选择不可以。<br>
<span class="stress bigsize">词列表</span>
</p>
<ul class="food">
<li>水果</li>
<ul>
<li>苹果</li>
<li>香蕉</li>
</ul>
<li>蔬菜</li>
<ul>
<li>青菜</li>
<li>白菜</li>
</ul>
</ul>
<ul class="food1">
<li>水果</li>
<ul>
<li>苹果</li>
<li>香蕉</li>
</ul>
<li>蔬菜</li>
<ul>
<li>青菜</li>
<li>白菜</li>
</ul>
</ul>
<a href="www.imooc.com">伪选择器</a>
</body>
</html>
0 0
- CSS学习（一）
- CSS学习（一）
- css学习（一）
- CSS学习（一）：css语法
- Css学习笔记（一）
- CSS 学习简记（一）
- css学习笔记（一）
- Css学习笔记（一）
- CSS学习笔记（一）
- css学习笔记（一）
- CSS学习笔记（一）
- CSS基础知识学习（一）
- css学习交流（一）
- css学习笔记（一）
- css学习（一）-CSS基础、css选择器
- CSS+DIV学习笔记（一）
- 基础知识--Css学习笔记（一）
- HTML、CSS学习笔记（一）
- 安装 node
- 第十二周项目一复数类中的运算符重载一
- 动态规划-最大子矩阵和（ZOJ 1074 TO THE MAX ）
- java反射机制浅析。
- MVC 结构的框架都有一个共同的模式
- CSS学习（一）
- 创建 nodejs HTTP服务器
- ios 自定义cell cellForRowAtIndexPath中的写法
- Difference between 2>&-, 2>/dev/null, |&, &>/dev/null and >/dev/null 2>&1
- SQL知识整理一：触发器、存储过程、变量表、临时表
- Leetcode 144
- nodejs 模块系统
- mysql连接方式
- Activity生命周期和启动模式
