学起来 —— 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: 0;}</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: 0;} #div3-1{width: 100px;height: 100px;background-color: yellow;position: relative;z-index: 10;} #div3-2{width: 150px;height: 150px;background-color: blue;position: relative;}
效果图附上
转载于:https://www.cnblogs.com/Tracey-1023/p/7291937.html
学起来 —— CSS 入门基础相关推荐
- 学理发的入门基础知识 哪些内容要了解
很多人学习理发,会选择去理发店当学徒,和师傅学习.有的人会选择去专业的培训学校学校,青岛德利丰美容美发学校认为,不论去哪里学习,都要从最基本的知识学起,学习理发最重要的就是要有正确的操作手法,要有时尚 ...
- CSS入门基础-目录
CSS简介-CSS入门基础(001) CSS选择器-CSS入门基础(002) id选择器的使用-CSS入门基础(003) 子选择器的使用-CSS入门基础(004) 字体样式-CSS入门基础(005) ...
- CSS入门基础详解——笔记、案例
CSS入门学习 一.CSS简介 1.什么是css css:层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记 ...
- CSS入门基础(样式,css文件,选择器)
CSS入门学习 CSS的简介 基本语法结构 基本用法 给元素添加样式 行内样式 内部样式 外部样式 定义样式css文件 在html中引入css文档 选择器 标签选择 类选择 id选择 CSS的简介 层 ...
- 初学古琴怎么学?古琴入门基础知识
有很多想学习古琴的朋友们经常会来问,古琴应该怎么学?因为有些地方的古琴教学资源还是有限,有些地方的古琴教学资源水平还是有限,有的时候只能自学,但是问题又来了,古琴到底适不适合自学?古琴应该怎么学? 其 ...
- 【测试基础】之03 CSS入门基础
CSS基础 目标 知道CSS的作用 基本掌握CSS语法规则 CSS简介 CSS:(Cascading Style Sheets)指层叠样式表 作用:用来定义如何显示HTML元素(定义HTML元素的样式 ...
- CSS入门基础学习(上)
css是层叠样式表的简称,有时称为css样式表或级联样式表. css是一种标记语言,用于设置HTML页面中的文本内容,图片的外形,以及版面的布局和外观显示样式.可以美化HTML的外观页面看起来更加简介 ...
- html无序列表空心圆_列表样式的使用CSS入门基础(018)
今天我们分享关于列表样式的内容.列表项list-sytle-type:在HTML学习中,我们知道有有序列表和无序列表,都是使用type属性来定义的.1.有序列表 有序列表 有序列表 有序列表 属 ...
- 表格标题位置-CSS入门基础(020)
今天我们接着分享表格样式的内容. 默认情况下,表格标题位置是在表格的上方,但是如果我们想要把表格标题放在表格下方呢? 在css中,我们可以使用caption-side属性来定义表格标题的位置. 语法: ...
最新文章
- sublime怎么编译java_文本编辑利器:Sublime Text3 编译运行Java程序
- 为什么要用hadoop
- 大话PM|产品设计中常被忽视的业务异常
- 封装请求 request.js
- Linux学习之系统编程篇:与产生信号有关的函数
- leetcode 563. 二叉树的坡度(Java版)
- priority_queue实现大顶堆和小顶堆
- 容器技术之快速了解K8S各抽象资源及组件架构
- rspec 测试页面元素_如何使用RSpec对Go应用进行黑盒测试
- java 内部类 返回值_Java学习笔记:形参和返回值、内部类、常用API
- MySQL数据库加密和解密~认证登陆密码(mysql.user)和MySQL不区分大小写
- Python3爬虫入门之selenium库的用法
- npm下载缓慢解决方法
- 关于js弹出框的介绍:
- 9个有趣的Python小项目,练手必备(附源码)
- ios共享账号公众号_我的世界 minecraft 国际版 非网易版 ios下载账号分享 公众号 iphone ipad...
- 戴着人工心脏上脱口秀大会——王十七的充电人生
- Latex取消英语单词自动断行
- 网易MuMu模拟器 更改模拟器大小(iphone5为例)
- Summer Project
热门文章
- 适合pythonpandas的软件_适合 Python 入门的 8 款强大工具!
- android自定义dialog不显示,Android 自定义的dialog显示不正常呢,怎么回事???
- mybatis 默认参数名#{0}、#{arg0}、#{param1},以及@Param
- 【Mybatis】 mapper XML 文件中使用 association 实现一对一关联
- mybatis plus 链式编程查询
- oracle服务未启动失败,windows服务未启动导致 ORA-12560和RMAN-00554错误 | 信春哥,系统稳,闭眼上线不回滚!...
- java实现apriori算法_七大经典、常用排序算法的原理、Java 实现以及算法分析
- rockemq 发送延迟消息_RocketMQ系列(五)广播与延迟消息
- Pandas实用技能,数据筛选query函数详细介绍
- android 阻尼动画,Android拉伸阻尼效果实现