css-知识总结
是什么
CSS通常称为CSS样式或层叠样式表，主要用于设置HTML页面中的文本内容(字体，大小，对其方式等)，图片的外形
（高宽、边框样式、边距等）以及版面的布局等外观显示样式。
CSS可以是HTML页面更好看，CSS色系的搭配可以让用户更舒服，CSS+DIV布局更佳灵活，更容易绘制出用户需要的结构。
引入样式的三种常用样式：
1.行内样式：
<a style="color: #f00; font-size:30px;">行内样式</a>
2.内部样式：
<style type="text/css">
body{
background-color:#ddd;
}
</style>
3.外部样式：
<link rel="stylesheet" type="text/css" href="css/demo00.css"/>引用方式
优先级：行内样式------->内部样式------>外部样式
选择器
常用三种：
id选择器：
#demo1{
color:#0f0;
}
<h1 id="demo1">id选择器</h1>
类选择器：
.myClass{
font-size:25px;
}
<h1 class="myClass">Java 软件开发</h1>
元素选择器：
h1{
color:#F00;
font-size:50px;
}
<h1>华信智原</h1>
（了解）属性选择器：
<style>
input[type='text']{
background-color:yellow;
}
input[type='password']{
background-color:green;
}
</style>
包含选择器：
<style>
#d1 div{
color:red;
}
</style>
div：独占一行
浮动；float
常用属性值：
lfet：元素向左浮动
right：元素想右浮动
none：元素不浮动（默认）
取消浮动：clear
常用属性值：
left：不允许左侧有浮动
right：不允许右侧有浮动
both:同时清除左右两侧浮动的影响
转化：display
用于<span>转化
inline:此元素将显示为行内元素(行内元素默认的display属性值)
block:此元素将显示为块元素(块元素默认的display属性值)
inline-block: 将对象呈递为内联对象，但是对象的内容作为块对象呈递。
none:此元素将被隐藏，不显示，也不占用页面空间。
例如：
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
span{
border: 1px solid #000;
width:100px;
height: 40px;
}
</style>
</head>
<body>
<!--默认显示一行，边框环绕，高度没有作用-->
<span>显示1-1</span>
<span>显示1-2</span>
<!--每一行显示，高宽有作用-->
<span style="display:blo ck;">显示2-1</span>
<span style="display:block;">显示2-2</span>
</body>
</html>
边框：border
外边框：margin
内边据：padding
css-知识总结的更多相关文章
- CSS知识回顾--读《CSS 那些事儿》笔记
由于之前有了解过CSS的相关知识,有了一定的基础,所以读起<CSS 那些事儿>不是很有难度,况且我现在读起来时,CSS3和HTML5比较流行,这里只是记录一些CSS知识记录,不做详细铺开, ...
- 你该学点HTML/CSS知识的9大理由
每个人都应该学写代码——这一观点简直就是铺天盖地地映入我们眼帘.或许你会莫名其妙,程序员学代码那是理所应当,但是作为一个作家.营销人员.财务工作者甚至是工人,为什么也需要学习代码呢? 好吧,下面我会告 ...
- WEBBASE篇： 第五篇， CSS知识3
CSS知识3 框模型: 一,外边距(上文) 二, 内边距 1,什么是内边距? 内边距就是内容与元素边缘之间的距离: 注: 内边距会扩大元素边框内所占的区域的 语法: padding: 四个方向的 ...
- WEBBASE篇： 第四篇， CSS知识2
CSS知识2 一, 尺寸 与 边框 CSS单位 1,尺寸单位:(1)px 像素 (2)% (3) in 英寸 lin = 2.54cm (4)pt 磅 1pt = 1/72in ppi ...
- WEBBASE篇： 第三篇， CSS知识1
第三篇, CSS知识1 一,CSS 介绍 CSS: Cascading Style Sheets ---样式表 HTML: 搭建网页结构: CSS: 在网页结构基础上进行网页的美化: 二,CSS的使用 ...
- 《HTML与CSS知识》系列分享专栏
收藏HTML和CSS方面的技术文章,作为一个WEB开发者,必须要知道HTML和CSS方面的知识,即使作为后台开发者也应该知道一些常用的HTML和CSS知识,甚至架构师也要了解,这样才会开发出实用的网站 ...
- Web前端基础怎么学？ JavaScript、html、css知识架构图
以前开发者只要掌握 HTML.CSS.JavaScript 三驾马车就能胜任一份前端的工作了.而现在除了普通的编码以外,还要考虑如何性能优化,如何跨端.跨平台实现功能,尤其是 AI.5G 技术的来临, ...
- css知识总结
---# 学习目标:> 1. 学会使用CSS选择器> 2. 熟记CSS样式和外观属性> 3. 熟练掌握CSS各种选择器> 4. 熟练掌握CSS各种选择器> 5. 熟练掌握 ...
- 我收藏的技术知识图（每张都是大图）关于XX背后的知识、技术图，例如：Linux、Nginx架构、PHP知识卡、机会、HTML5移动、Android系统架构、YII架构的典型流程、Css知识表
我收藏的技术知识图(每张都是大图) HTML5Linux/Unix系统设计思想读书笔记 LinuxMVCJava线程MVCSpring MVCCSS3Nginx架构VimCliCommandsPHP知 ...
- 网页制作常用的CSS知识
在制作网页中,我们会用到很多CSS的知识,在这里我简单的总结了一些. div 划分区块 ul,li 无序列表(配合划分区块) ol,li 有序列表 a 超链接标签 p 段落标签 h 标题标签 i ...
随机推荐
- rest_framework视图基类与五个扩展类
1. 两个基类 1)APIView rest_framework.views.APIView APIView是REST framework提供的所有视图的基类,继承自Django的View父类. AP ...
- DRF的认证、权限 和 限制
一.概述 认证是将传入请求与一组标识凭据(例如请求来自的用户或其签名的令牌)相关联的机制.然后 权限 和 限制 组件决定是否拒绝这个请求. 简单来说就是: 认证确定了你是谁 权限确定你能不能访问某个接 ...
- HTML5+CSS实现三列布局自适应
利用CSS的float属性可以将元素并排,做出三列并排的布局. 如这样的效果 实现的原理:只要将3个元素设置float属性,属性值为left,同时指定不同比例的宽度,及高度. 下面是实现代码 < ...
- python学习之路---day05
字典一:基本组成 dic={"",[],{},"",2,} 字典由key 和value组成, key(键):键是不可变的(且必须要不可改变),一个字典中的key ...
- C#多线程函数如何传参数和返回值
详见网站:http://WWW.MOVIH.COM就是一个多线程爬虫系统. C#多线程函数如何传参数和返回值 提起多线程,不得不提起 委托(delegates)这个概念. 我理解的委托 ...
- ssm裤架搭建异常： Dependency annotations: {@javax.annotation.Resource(shareable=true, lookup=, name=, description=, authenticationType=CONTAINER, type=class java.lang.Object, mappedName=)}
org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'userService' ...
- WPF 布局
WPF布局原则 WPF窗口只能包含单个元素,为在WPF窗口中放置多个元素并创建更贴近使用的用户界面,需要在窗口上放置一个容器,然后在这个容器中添加其他元素 遵循以下几条重要原则 不应显式设定元素(如控 ...
- Apache Shiro(四)-登录认证和权限管理WEB支持（Servlet）
新建web项目 web.xml 修改web.xml,在里面加了个过滤器. 这个过滤器的作用,简单的说,就是 Shiro 入门里的TestShiro 这部分的工作,悄悄的干了. //加载配置文件,并获取 ...
- PostgreSQL精简命令:
dos命令行连接PostgreSQL: . 接入PostgreSQL数据库: psql -h IP地址 -p 端口 -U 用户名 -d 数据库名 . 输入数据库密码 C:\Users\admin\De ...
- jmeter+ant+jenkins生产的报告乱码
jmeter+ant+jenkins生产的报告乱码 问题:生产报告会乱码的问题,一般是有编码格式引起的.我遇到的问题是,jmeter需要读取csv的数据作为参数.但是我们并不知道csv保存是什么编码格 ...