学起来 —— CSS 入门基础
Hello,大家好！
小女来更博啦！CSS福利送上~~~
首先给大家介绍一下CSS到底是什么？
一、CSS概念
W3C规范中，要求有三条：一 为“两个分离”，二 为语言遵循语义化，三 为代码书写规范性。其中要求的第一条“两个分离”指的是内容与表现分离以及内容与行为分离，而其中的“表现”指的就是CSS。CSS全称Cascading Style Sheets，中文名为层叠样式表，是一种用来表现HTML等文件样式的计算机语言，可以给HTML带来更多更精彩的表现形式。
二、CSS引入的三种方式
1、行内样式表
直接在HTML标签中，使用style=""的方式引用；
eg. <div style="height: 30px;"></div>
优点：优先级最高；使用灵活。 缺点：不符合W3C关于内容与表现分离的要求，不利于样式复用；
2、内部样式表
在 <head></head>标签中，使用style标签包裹CSS代码。
<head>
<style type="text/css" >
</style>
</head>
特点：一定程度上实现了HTML与CSS的分离。但是分离不够彻底，没办法实现多页面共用样式。
3、外部样式表：
将css单独写入css文件中，并与HTML文件关联。
① 在head标签中，使用link链接。
eg. <link rel="stylesheet" type="text/css" href="css/01-CSS.css" />
优点：彻底实现HTML与CSS 的分离，符合W3C的规范，有利于多页面复用，统一样式。常用link方式引入。
三、CSS常用选择器
<1> 通用选择器
<style type="text/css" >
*{
color: pink;
background-color: darkgrey;
}
li{
color: red;
} .li01{
color: blue;
}
#first{
color: green;
}
</style>
#first.li01{
color: deepskyblue;
}
#first,.li01{
color: deeppink;
}
ul li{
color: darkorange;
}
div>ul>.li01{
background-color: deepskyblue;
}
<style type="text/css">
.div{
width: 500px;height: 500px;
color: #000000;
background-color: rgba(255,0,222,0.3);
}
.div{
font-weight: lighter;
font-style: italic;
font-size: 30px;
font-family:"宋体","黑体","微软雅黑","幼圆","隶书",sans-serif;
font-variant: small-caps;
font:75%/1.5 arial "微软雅黑",sans-serif;
}
</style>
]；
<head>
<meta charset="UTF-8">
<title>CSS 定位</title>
<style type="text/css">
#div1-1{
width: 200px;
height: 200px;
background-color: red;
position: relative ;
top: 100px; /*距离原来位置的上边100px top生效*/
bottom: 200px;
right: 200px;
left: 100px; /*距离原来位置的左边100px left生效*/
z-index: -1;
}
#div1-2{
width: 200px;
height: 200px;
background-color: yellow;
position: relative;
z-index:;
}
</style>
</head>
#div2{
width: 500px;
height: 500px;
background-color: blue;
margin: 0 auto;
position: relative; /* 目的:将绝对定位div2-1的位置限制于div2中*/
}
#div2-1{
width: 200px;
height: 200px;
background-color: red;
position: absolute;
left: 100px;
top: 100px;
}
#div3{
width: 200px;
height: 200px;
background-color: red;
position: relative;
top: 150px;
left: 100px;
/*z-index: auto; */ /*设置 auto与设置为数值的区别*/
z-index:;
}
#div3-1{
width: 100px;
height: 100px;
background-color: yellow;
position: relative;
z-index:;
}
#div3-2{
width: 150px;
height: 150px;
background-color: blue;
position: relative;
}
效果图附上
学起来 —— CSS 入门基础的更多相关文章
- 第六十九节，css入门基础
css入门基础 学习要点: 1.使用CSS 2.三种方式 3.层叠和继承 本章主要探讨HTML5中CSS (层叠样式表),它是用来对HTML文档外观的表现形式进行排版和格式化. 一 使用CSS CSS ...
- CSS入门基础学习二
我们下午继续学习CSS的入门基础,搬上你的小板凳赶快进入吧! 一.背景(background) Background-color:背景颜色 background-image (背景图片) backgr ...
- 【CSS入门基础，有需要的看过来哦】心境，心静，不轻言放弃！---致CSS
整理一下近一周学习的有关CSS的基础知识笔记: CSS语法必须写在<style>标签中哦~/*注释*/ [CSS常用背景属性]background background-color:背景色 ...
- CSS 入门基础
一.CSS 介绍什么是CSS CSS 指的是层叠样式表(Cascading StyleSheet).在网页制作时采用层叠样式表技术, 可以有效地对页面的布局.字体.颜色.背景和其它效果实现更加精确的控 ...
- CSS入门基础
认识CSS 传统HTML设计网页版面的缺点 CSS的特点 CSS的排版样式 13.1 认识CSS CSS的英文全名是Cascading Style Sheets,中文可翻译为串接式排版样式,并且CSS ...
- css入门基础知识
一.CSS常用选择器 /*CSS注释*/ /*CSS修改页面中的所有标签必须借助选择器选中. 选择器中可以写多对CSS属性:每个属性名与属性值之间用:分隔,多对属性之间,必须用;分隔 选择器{ 属性1 ...
- 13 ，CSS 入门基础,行内排版内嵌式排版和外部排版样式
1.认识 CSS 2.传统 HTML 设计网页版面的缺点 3.CSS 的特点 4.CSS 的排版样式 13.1 认识CSS CSS的英文全名是 Cascading Style Sheets,中文可翻译 ...
- HTML中CSS入门基础
HTML.CSS 实用css有三种格式:内嵌:内联:外部: 分类:内联:写在标记的属性位置,优先级最高,重用性最差内嵌:写在页面的head中,优先级第二,重用性一般外部:写在一个以css结尾的文件中, ...
- CSS入门基础学习一
一.CSS样式 1.什么是CSS: CSS是指层叠样式表(Cascading Style Sheels),CSS通常为CSS样式表或层叠样式表,主要用于设置HTML文本内容,以及版本面的布局等 2.H ...
随机推荐
- .NetCore+Jexus代理+Redis模拟秒杀商品活动
开篇叙 本篇将和大家分享一下秒杀商品活动架构,采用的架构方案正如标题名称.NetCore+Jexus代理+Redis,由于精力有限所以这里只设计到商品添加,抢购,订单查询,处理队列抢购订单的功能:有不 ...
- voa 2015 / 4 / 14
Even with falling oil prices and strong U.S. growth, the head of the International Monetary Fund sai ...
- （转）ManyToMany注解
@ManyToMany 注释:表示此类是多对多关系的一边,mappedBy 属性定义了此类为双向关系的维护端,注意:mappedBy 属性的值为此关系的另一端的属性名. 例如,在Student类中有 ...
- etcd raft如何实现成员变更
成员变更在一致性协议里稍复杂一些,由于不同的成员不可能在同一时刻从旧成员组切换至新成员组,所以可能出现两个不相交的majority,从而导致同一个term出现两个leader,进而导致同一个index ...
- hibernate的对象状态分析
开发框架 springMVC hibernate5.0.1 hibernate三种状态 Hibernate定义并支持下列对象状态(state): 临时状态(Transient) 当new一个实体对象后 ...
- scroll事件实现监控滚动条并分页显示示例(zepto.js )
今天做了一个类似于手机端京东首页的页面,效果图如下: 刷新页面的时候,标题栏(也就是搜索栏),背景是透明的,当我们往下滑的时候,可以改变标题栏的背景透明度(渐变效果): 当标题栏滑过轮播图后,透明度就 ...
- shell脚本中字符串的常见操作及"command not found"报错处理(附源码)
简介 昨天在通过shell脚本实现一个功能的时候,由于对shell处理字符串的方法有些不熟悉导致花了不少时间也犯了很多错误,因此将昨日的一些错误记录下来,避免以后再犯. 字符串的定义与赋值 # 定义S ...
- Java创建连接池连接不同数据库
在一个应用里面,可能涉及到连接多个不同数据库进行操作,而每次连接写不同的实现会很麻烦.前面已经会了用JDBC连接数据库,那么利用反射和工厂模式,可以实现连接不同的数据库,这样处理起来将会很方便.同时建 ...
- Java第三次上课课堂试验博文
1.Java字段初始化的规律: 运行如下所示的代码 package demo; public class InitializeBlockDemo { /** * @param args */ publ ...
- css 为元素选择器，css目标状态伪类，结构化选择器，多媒体选择器，清除表默认样式、属性选择器
伪元素选择器 :before 和 :after 添加的位置 :before --- 第一个子节点 :after --- 最后一个子节点 特点 1.默认是 inline 元素 2.必须包含 conten ...