div+css入门知识
2024-05-15 00:23:37
使用css的必要性
- css的基础语法:
选择器{属性1：属性值；属性2：属性值；......
}
- 必要性一：容易变换风格。（对class属性的值改变可以很容易变换不同的风格）
<!--div_css_demo1.html-->
<html>
<head>
</head>
<!--css部分可以单写一个文件，然后引入，也可以直接嵌入到该html文件-->
<link rel="stylesheet" type="text/css" href="div_css_demo1.css">
<body>
<!--span元素通常用于存放小块内容-->
<span class="s1">栏目一<br/></span>
<span class="s2">栏目二<br/></span>
<span class="s3">栏目三<br/></span>
<span class="s4">栏目四<br/></span>
<span class="s5">栏目五<br/></span>
</body>
</html>
/*css的注释*/
/*div_css_demo.css*/
/*类选择器*/
.s1{color:green;font-size:30px;text-decoration:underline;
}
.s2{color:red;font-size:12px;
}
.s3{color:blue;font-style:italic;
}
.s4{color:green;font-weight:bold;
}
.s5{color:#9c3131;
}
- 使用css可以很容易实现滤镜效果。
<html>
<head>
</head>
<style type="text/css">a:link img{filter:gray;width:100px;}a:hover img{filter:blank;width:100px;}
</style>
<body>
<a href="#"><img src="1.jpg"/></a>
<a href="#"><img src="1.jpg"/></a>
<a href="#"><img src="1.jpg"/></a>
</body>
</html>
- css在各个文件（html，jsp，php，asp.net）中使用。
四种选择器
css中常用的选择器：
- 类选择器（class选择器）
- id选择器
- html元素选择器
- 通配符选择器
类选择器基本语法
.类选择器名{属性1：属性值；属性2：属性值；......
}
- id选择器基本语法
#id选择器名{属性1：属性值；属性2：属性值；......
}
- 案例
<!--div_css_demo1.html-->
<html>
<head>
</head>
<!--css部分可以单写一个文件，然后引入，也可以直接嵌入到该html文件-->
<link rel="stylesheet" type="text/css" href="div_css_demo1.css">
<body>
<!--span元素通常用于存放小块内容-->
<span id="id1">这是一个栏目表<br/></span>
</body>
</html>
/*css的注释*/
/*id选择器的使用*/
#id1{background-color:gray;font-size:30px;font-weight:bold;
}- html元素选择器基本语法
某个html元素{属性1：属性值；属性2：属性值；......
}
案例。所有的超链接满足以下条件：
- 默认样式是黑色，24px，没有下划线。
- 当鼠标移动到超链接时，30px，自动出现下划线。
- 点击后，超链接变成红色，没有下划线。
<!--html-->
<html>
<head>
<title>html选择器案例</title>
</head>
<link rel="stylesheet" type="text/css" href="div_css_html.css">
<body>
<a href="http://www.baidu.com">链接到百度</a>
<a href="http://www.taobao.com">链接到淘宝</a>
<a href="http://www.hao123.com">链接到浏览器</a>
</body>
</html>
/*css*/
/*默认*/
a:link{color:black;font-size:24px;text-decoration:none;
}
/*悬停*/
a:hover{color:green;font-size:30px;text-decoration:underline;
}
/*访问过*/
a:visited{color:red;font-size:24px;
}
- 通配符选择器基本语法
*{属性1：属性值；属性2：属性值；......
}
- 案例：页面一般存在页边距，当我们想要消除页边距时，通常使用通配符选择器。
/*通配符选择器*/
*{/*margin四个值一般是:上，右，下，左*//*margin:0px 0px 0px 0px;*//*margin一个值（上右下左），两个值（上下，左右），三个值（上，左右，下）*/margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;
}
- 四种选择器的优先级：id选择器 → class选择器 → html选择器 → 通配符选择器。
父子选择器
- 父子选择器可以有多级（实际开发过程中不要超过三级）。
- 父子选择器有严格的层级关系。
- 类选择器和id选择器都可以有父子选择器。
- 对某行个别文字使用嵌套风格时，使用父子选择器非常方便。
- 案例
<html>
<head>
</head>
<link rel="stylesheet" type="text/css" href="div_css_demo1.css">
<body>
<span id="id1">这是<span>一个<span>栏目</span></span>表<br/></span>
</body>
</html>
#id1{background-color:gray;font-size:30px;font-weight:bold;
}#id1 span{background-color:pink;font-size:40px;font-weight:bold;
}
#id1 span span{background-color:blue;font-size:50px;font-weight:bold;
}
深入探讨
- 一个元素可以有同时有id选择器和类选择器（id选择器的优先级高）。
- 一个元素只能有一个id选择器，但可以有多个类选择器。
- 当两个类选择器发生冲突了，则以写在css文件中的后面的那个类选择器为准。（另一种说法：当两个类选择器发生冲突了，则以写在html文件中的前面的那个类选择器为准。请大家亲自试验得出结论。）
- id选择器复用性比较低，优先级比较高，唯一使用。如果某个样式只是给某一个html元素使用，则选择id选择器；如果某个样式可能给多个html元素使用，则应当选择class选择器。
<html>
<head>
</head>
<link rel="stylesheet" type="text/css" href="div_css_demo3.css">
<body>
<span id="id1" class="s1">菜谱<br/></span>
<span class="s1">红烧茄子<br/></span>
<span class="s2" class="s1">椒盐蘑菇<br/></span>
<span class="s1">剁椒鱼头<br/></span>
<span class="s1">麻辣小龙虾<br/></span>
</body>
</html>
#id1{font-size:50px;color:yellow;background-color:green;
}.s1{font-size:30px;color:blue;background-color:gray;
}.s2{font-size:10px;color:red;background-color:pink;
}
- 我们可以把某个css文件中的选择器的共有部分独立出来。
/*用逗号分离*/
.s1,.s2,.s3,.s4,.s5{font-weight:bold;text-decoration:underline;
}
- css文件本身也会被浏览器从服务器下载到本地，才能显示效果。
行内元素和块元素
行内元素只占据本身内容的宽度，不占据整行。
块元素不管本身内容，占据整行，换行显示。
行内元素只能容纳文本和其他行内元素，块元素可以容纳文本，行内元素和块元素（与浏览器类版本和类型有关）。
一些css属性对行内元素不生效，比如margin，left，right，width，height，建议尽可能使用块元素定位（与浏览器类版本和类型有关）。
常见的行内元素有<a> <span> <input type=“XXX”>
常见的块元素有<div> <p>
行内元素和块元素可以转换
- display:inline 表示使用行内元素方式显示
- display:block 表示使用块元素方式显示
<html>
<head>
</head>
<link rel="stylesheet" type="text/css" href="div_css_demo3.css">
<body>
<span id="id1" class="s1">菜谱</span>
<a class="s2" href="#">远程菜谱</a>
<input class="s1" type="text" value="输入框"/>
<div class="s1">红烧茄子</div>
<p class="s1">椒盐蘑菇</p>
</body>
</html>
#id1{font-size:50px;color:yellow;background-color:green;
}.s1{font-size:30px;color:blue;background-color:gray;
}.s2{font-size:70px;color:red;background-color:pink;display:block;
}
标准流和非标准流
- 流：html元素在网页中显示的顺序。
- 标准流：在html文件中，写在前面的元素在前面显示，写在后面的元素在后面显示。
- 非标准流：在html文件中，当某个元素脱离标准流，那么它就处于非标准流。
盒子模型
- 盒子模型
- 盒子模型示意图
- 案例
<!--特别注意-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>盒子案例</title>
</head>
<link rel="stylesheet" type="text/css" href="div_css_box1.css">
<body>
<div class="div1">
<img src="1.jpg"/>
</div>
</body>
</html>
body{/*1px:边框的宽度 solid:实线 red:红色*/border:1px solid red; width:200px;height:200px;/*让body自动居中(第一个用于上下，第二个用于左右，auto表示自动居中)*//*特别注意*/margin:0 auto;
}.div1{width:100px;height:100px;border:1px solid blue;margin:10px 0px 0px 10px;
}.div1 img{width:40px;height:40px;border:1px solid pink;margin:10px 0px 0px 10px;
}
- 另一种写法
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>盒子案例</title>
</head>
<link rel="stylesheet" type="text/css" href="div_css_box1.css">
<body>
<div class="div1">
<ul class="ul1">
<li class="li1"><img src="1.jpg"/></li>
<li class="li1"><img src="1.jpg"/></li>
<li class="li1"><img src="1.jpg"/></li>
<li class="li1"><img src="1.jpg"/></li>
<li class="li1"><img src="1.jpg"/></li>
<li class="li1"><img src="1.jpg"/></li>
<li class="li1"><img src="1.jpg"/></li>
</ul>
</div>
</body>
</html>
body{/*1px:边框的宽度 solid:实线 red:红色*/border:1px solid red; width:400px;height:300px;/*让body自动居中(第一个用于上下，第二个用于左右，auto表示自动居中)*/margin:0 auto;
}.div1{margin:10px 0px 0px 10px;border:1px solid blue;width:300px;height:200px;
}.ul1{/*background-color:gray;*/ /*可以加背景色去查看盒子的位置*/list-style-type:none;/*去除小点*/margin:0px;padding:10px 0px 0px 10px;
}.li1{float:left;/*浮动，重要的知识点*/width:40px;height:40px;border:1px solid pink;margin-right:10px;margin-bottom:10px;/*background-color:gray;*/
}.li1 img{width:40px;height:40px;
}- 案例2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!--特别注意：我们常用的<!DOCTYPE>有两种：HTML Transitional DTD和XHTML Transitional DTD-->
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="div_css_box2.css">
<title>盒子案例</title>
</head>
<body>
<div class="div1"><div class="div2">
<span><font>优酷牛人</font><a href="#">更多牛人</a></span>
<ul>
<li><img src="1.jpg"/><a href="#">描述</a></li>
<li><img src="1.jpg"/><a href="#">描述</a></li>
<li><img src="1.jpg"/><a href="#">描述</a></li>
</ul>
</div><div class="div2">
<span><font>明星空间</font><a href="#">更多空间</a></span>
<ul>
<li><img src="1.jpg"/><a href="#">描述</a></li>
<li><img src="1.jpg"/><a href="#">描述</a></li>
<li><img src="1.jpg"/><a href="#">描述</a></li>
</ul>
</div><div class="div2">
<span><font>优酷工艺</font><a href="#">更多工艺官网</a></span>
<ul>
<li><img src="1.jpg"/><a href="#">描述</a></li>
<li><img src="1.jpg"/><a href="#">描述</a></li>
<li><img src="1.jpg"/><a href="#">描述</a></li>
</ul>
</div></div>
</body>
</html>
.div1{width:460px;height:610px;margin:10px 0px 0px 10px;border:1px solid red;
}.div2{width:420px;height:170px;margin:10px 10px 10px 10px;/*background-color:gray;*/padding:10px 10px 10px 10px;
}span{/*background-color:pink;*/display:block; /*以块元素显示*/
}span font{font-weight:bold;font-size:20px;
}span a{color:blue;float:right;
}ul{padding:0px;
}li{list-style-type:none;float:left;margin-right:20px;margin-left:20px;text-align:center; /*使文字居中*/
}li img{width:100px;height:100px;padding-bottom:10px;
}li a{display:block;
}
div+css入门知识相关推荐
- 菜鸟教程css事件,【推荐】DIV+CSS入门菜鸟教程
这篇文章主要为大家详细介绍了[推荐]DIV+CSS入门菜鸟教程,具有一定的参考价值,可以用来参考一下. 感兴趣的小伙伴,下面一起跟随512笔记的小编罗X来看看吧. CSS功能复杂多变,大多数新手莫不着 ...
- html如何让图片与低端平齐,CSS入门知识-图片水平对齐技巧
CSS入门知识-图片水平对齐技巧 在CSS中,图片怎么水平对齐,有哪些技巧呢?我们一起来学习一下吧! 一.图片水平对齐text-align 在"文本水平对齐text-align"这 ...
- DIV+CSS 入门
玩一小会儿前csdn什么时候,页面上的加qq而微博,我认为这是美好的.牛腩完成.运营商也开始了他真正的学习B/S之旅. 刚開始的时候,我不知道<div>是什么 也不清楚CSS用来干什么的, ...
- WEB网页设计中的DIV+CSS入门(转自：中国站长在线网)
CSS是Cascading Style Sheets(层叠样式表)的缩写.是一种对web文档添加样式的简单机制,属于表现层的布局语言. 一.基本语法规范 分析一个典型CSS的语句: p {COLOR: ...
- css入门知识总结2--选择器
在编写CSS3样式时,不同的浏览器可能需要不同的前缀.它表示该CSS属性或规则尚未成为W3C标准的一部分,是浏览器的私有属性,虽然目前较新版本的浏览器都是不需要前缀的,但为了更好的向前兼容前缀还是少不 ...
- css入门知识总结一
文档目录 css的类型 内联式 嵌入式 外部式 背景 边框 圆角效果`border-radius`(边界半径) 阴影 为边框应用图片 字体和文本样式 字体样式 文本样式 本文是基于css3的. css ...
- div css入门教程，更简洁CSS清理浮动方式：clearfix
- 清理浮动有很多种方式,像使用 br 标签自带的 clear 属,使用元素的 overflow,使用空标签来设置 clear:both 等等.但考虑到兼容问题和语义化的问题,一般我们都会使用如下代码 ...
- 陈力：传智播客古代 珍宝币 泡泡龙游戏开发第八讲：DIV+CSS中类选择器、id选择器和html选择器介绍
陈力:传智播客古代 珍宝币 泡泡龙游戏开发第八讲:DIV+CSS中类选择器.id选择器和html选择器介绍 陈力:传智播客古代 珍宝币 泡泡龙游戏开发第七讲:DIV+CSS入门.在贵阳网站建设中,经常 ...
- 【入门须知】学DIV CSS技术如何入门?
[入门须知]学DIV CSS技术如何入门? 引言: 引用一本书中的一段文字:"当我第一次开始学习汉语时,我的家庭老师老王给了我一本汉英字典.一本汉语语法书和一本初级教程.但是,他将这些书放 ...
- 网页设计DIV+CSS——第7天:CSS入门
在了解XHTML代码规范后,我们就要进行CSS布局.首先先介绍一些CSS的入门知识.如果你已经很熟悉了,可以跳过这一节,直接进入下一节. CSS是Cascading Style Sheets(层叠样式 ...
最新文章
- bootstrap4 左侧导航栏 优秀 大气_制作动态效果的后台导航栏——左侧导航
- mongodb存list_查询 MongoDB 子文档的 List 字段
- 全国计算机一级知识题及答案解析,全国计算机等级考试一级试题库大全完整版附参考答案...
- php中的address,html中address是什么意思？（代码示例）
- 生产上线发现重大Bug的思考
- Android学习笔记（三）——Button之圆角、按压效果、点击事件
- jsp+aJax 登陆成功
- Xcode12.3 、12.4 运行 iOS15 ：The code signature version is no longer supported
- BZOJ 3160: 万径人踪灭 [fft manacher]
- 若依最详细的配置（零基础，小白版）
- 2021荣耀秋招笔试代码题
- [Docker Swarm集群+图形化界面Visualizer笔记记录]
- 写好的python如何在其它电脑上运行_写人作文-写人作文300字-400字-500字
- mac 屏幕录制专家
- Python 圆拟合
- 建房遮阳标准的计算机方法,农村建房遮阴计算标准，看看怎么计算？
- 树莓派4B修复双触摸屏触摸问题
- 解决 org.gjt.mm.mysql.Driver 报错问题 实测有效
- 魔兽在副本里服务器维护了,魔兽世界11月19日维护服务器状态查询地址 6.2.3补丁上线更新一览...
- VMware 虚拟SCSI、SATA 和 NVMe 存储控制器条件、限制和兼容性