css div快捷键,div+css基础
Div+css技术
Div是用于存放文字,图片,元素的容器
Css 是用于指定存放在div中的内容如何显示,包括内容的位置和外观(层叠样式表)
Html 文件
1 | 3 | 4 | 5 |
1 | 3 | 4 | 5 |
1 | 3 | 4 | 5 |
1 | 3 | 4 | 5 |
1 | 3 | 4 | 5 |
Css文件
/*选择器*/
/*margin:上右下左*/
.style1{
width:100px;
height:200px;
border:1px solid red ;
color:blue;
margin:100px 200px 300px 400px;
}
/* 父子选择器table*/
.style1 table{
width:99px;
height:180px;
border:1px solid black;
}
/*父子选择器td*/
.style1 table td{
border:1px solid black;
text-align:center;
}
CSS的必要性
使用以及强大的工具
使用IDE(集成开发环境)myeclicpse
因为myeclipse 带有提示功能
一般的网站头部文件解释
Eclipse的快捷键设置(content Assitant),把它配置成~
在windows –prefrecnse-输入key-输入content-content Assitant –快捷键改成·
对于新建的html文件的解释
使用span 格式 ,看到使用Css的一般格式
元素可以是html之中的任意一种
属性名和属性值要参考W3CSCHOOL的文档
运行:
然后使用CSS来统一风格
CSS 分类:内部CSS,外部CSS
使用内部CSS
汶川大地震时使所有的图片和文字全都变黑白-----------------滤镜技术
CSS选择器
id>类选择器>html选择器
1 类选择器
编写一个css文件,在HTML中引入CSS,使用CSS定义的类控制器
可以直接拖入CSS
2 id选择器
注意:是#
3 html选择器
这个是控制全局样式的选择器,优先比较低,优先级是:id>类选择器>html选择器
练习:
对于超链接的处理:
通配符选择器
作用:用来解决不同浏览器之间的左边距和上边距不统一的问题,有时候特别有用
/*使用通配符选择器,对外边距和内边距进行清零*/
*{
/*margin: 0px;*/
/* margin:10px 0px 0px 10px; */ /*代表着上 右 下 左 逆时针方向旋转*/
margin:10px 0px 0px ; /*代表着上 左右 下 */
padding: 0px;
}
CSS 综合使用
一行字内的格式风格有所不同利用id选择器
#style2{
font-size: 50px;
color: green;
font-style: italic;
}
/*父子选择器*/
#style2 span {
color: red;
font-size: 60px;
}
2 父子选择器在id 选择器和 class 选择器都可以
但是id 选择器要大于 class 选择器
3 父子选择器还可以多层出现 style2—span-span
#style2 span span{
color: red;
font-size: 60px;
}
4 一个元素只可以有一个id选择器,但是可以有多个class选择器
有两个class 选择器的时候,看谁写在css文件的后面以谁为主
四类选择器的优先权:id class html通配符
然后,优化代码部分,提取共性的css
例如
练习题
Css文件代码
块元素和行内元素
行内元素:Span 元素:里面的东西有多大就多大,只占内容的宽度,默认不会换行,一般放文本或者其他的行内元素
块元素:Div,p 元素:不管内容多少,要换行,同时占满整个一行(太霸道),可以放文本,行业元素,块元素
块元素和行内元素互换
Display:block 行内元素转块元素
Display:inline 块元素转行内元素
div+css基础教程
本文存下来作为备忘. 第一节 了解div+css 一.什么是div+css div元素是html(超文本语言)中的一个元素,是标签,用来为html文档内大块(block-level)的内容提供结构和 ...
DIV+CSS 基础
盒子模型:margin(边界),可被占位:border(边框):padding(填充):content(内容) 块元素: 默认占据一行,前后换行. 作为容器,装载块元素和行内元素,被装载元素的位置,会 ...
2天驾驭DIV+CSS (基础篇)(转)
这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” 将你引入两大误区 ...
【笔记-前端】div+css排版基础,以及错误记录
现在的网站对于前端的排版已经逐渐不使用
HTML+DIV+CSS+JSweb前端基础
HTML+DIV+CSS+JSweb前端基础 1.和 标签限定了文档的开始和结束点. 属性: (1) dir: 文本的显示方向,默认是从左向右 (2 ...
DIV+CSS专题:第一天 XHTML CSS基础知识
欢迎大家学习,也就是我们常说的DIV+CSS.不过这里的DIV+CSS是一种错误的叫法,建议大家还是称之为web标准. 学习本系列教程需有一定html和css基础 ...
DIV+CSS+JS基础+正则表达式
...............HTML系列.................... DIV元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素.DIV的起始 ...
Web前端温故知新-CSS基础
一.CSS定义与编写CSS 1.1 CSS的定义 全名:Cascading Style Sheets -> 层叠样式表 定义:CSS成为层叠样式表,它主要用于设置HTML页面中的文本内容(字体. ...
随机推荐
[git]解决:git config --global push.default matching
解决:git config --global push.default matching 这个警告的意思是:需要设置默认push的分支,所以设置好全局push的默认分支就好了.命令如下: 在有git目 ...
db link的查看创建与删除(转)
1.查看dblink select owner,object_name from dba_objects where object_type='DATABASE LINK'; 或者 select * ...
linux下安装python linux下一些常用的命令
注意 ubuntukylin-14.04.2-desktop-amd64 自带python2.7.6 这个说的比较详细 http://wenku.baidu.com/link?url=gaeFcQrc ...
python3 urllib.request.urlopen() 地址打开错误
错误内容:UnicodeEncodeError: 'ascii' codec can't encode characters in position 28-29: ordinal not in ran ...
GoF——职责链模式
职责链模式(chain of Responsibility):使多个对象都有机会处理请求,从而避免请求的发送者和接收者之间的耦合关系.将这个对象连成一条链,并沿着这条链传递该请求,直到有一个对象处理它 ...
[转]快速新建简单的koa2后端服务
本文转自:https://blog.csdn.net/saucxs/article/details/83788259 既然前端工程化是基于NodeJS,那么选择NodeJs做前后端分离部署也是理所应当 ...
[mybatis]Example的用法-转
转自:https://blog.csdn.net/zhemeban/article/details/71901759 Example类是什么? Example类指定如何构建一个动态的where子句. ...
Angular基础(八) Observable &; RxJS
对于一个应用来说,获取数据的方法可以有很多,比如:Ajax, Websockets, LocalStorage, Indexdb, Service Workers,但是如何整合多种数据源.如何避免BU ...
Angular4学习笔记(六)- Input和Output
概述 Angular中的输入输出是通过注解@Input和@Output来标识,它位于组件控制器的属性上方. 输入输出针对的对象是父子组件. 演示 Input 新建项目connInComponents: ...
css div快捷键,div+css基础相关推荐
- html div套div,Web前端开发技术之Div+Css基础
今天我们的课程内容有: CSS在页面风格设计中的作用 多个HTML页面调用一个CSS文件 DIV的创建与应用 用DIV+CSS的方式来写HTML页面 传统HTML的缺点和现在Css的优势Html的不足 ...
- css属性基础以及wxss——居中,渐变色边框,圆角边框,横向布局,重叠div,div固定在底部,input的无边框显示下划线
text-align: center;--子item居中对齐 display: flex;--子item横向布局 -webkit-justify-content: center;--子item居中 m ...
- html css样式div属性,div css
DIV+CSS是WEB设计标准,它是一种网页的布局方法.与传统中通过表格(table)布局定位的方式不同,它可以实现网页页面内容与表现相分离.提起DIV+CSS组合,还要从XHTML说起.XHTML是 ...
- html中写css代码,开发DIV CSS时 先写CSS代码还是先写HTML代码
相信良多LOVE用DIV+CSS技术启示重构网页的爱好者友好,在起源学习DIV+CSS的时分都邑想一个标题,想晓得DIV+CSS妙手或有教育者在开发制作html页面的时刻,下场是先写html照样先写c ...
- css html 字竖,CSS实现文字竖排 DIV CSS文字垂直竖列排版显示如何实现?
DIV CSS实现文字竖排排版显示兼容各大浏览器,让文字垂直竖列排版布局. 有时我们需要一段文字进行从上到下竖列排版,我们知道CSS样式中有一样式可以让其竖列排版,但所有浏览器不全兼容,逼不得已放弃. ...
- div css教程 属性,Div+CSS布局入门教程
在网页制作中,有许多的术语,例如:CSS.HTML.DHTML.XHTML等等.在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础 ...
- html中如何写div中div的位置,DIV CSS绝对定位布局案例 position布局实例
DIVCSS5为大家实例讲解绝对定位布局.绝对定位我们要用到样式position:absolute和position:relative,同时需要top.bottom.left.right配合布局实现D ...
- css 浮动 解决,div+css浮动的解决方法
如何清楚浮动(一) 已知一个大的div容器,这个容器包含了两个子div容器,然后在这两个子div容器的后面再添加一个div(这个div表示清除浮动的div容器),清楚浮动的div容器设置css样式为c ...
- html实现div变透明,css实现父div透明子div内容不透明
标题可能不是很专业,只要你有一点前端基础的应该能看懂意思,昨天没休息好,今天写项目有点飘,总是写了尾巴忘了头,年轻少熬夜*-* 如标题今天记录三个Css属性 opacity rgb rgba 下面来讲 ...
最新文章
- Revit和Unreal Engine真实的建筑可视化视频教程
- 牛腩知识小结-盒子模型
- 人工智能听了很多遍,都应用在哪些领域了你知道吗?
- 单词接龙pascal程序
- Jenkins Kubernetes 如何协同工作
- 升级php7_PHP 5.6 已结束安全支持,你升级到 PHP 7 系列了吗?
- 《中国人工智能学会通讯》——7.7 结束语
- android 图标错误的是什么,如何修复:android.app.RemoteServiceException:从包中发布的错误通知*:无法创建图标:StatusBarIcon...
- 【数学建模】基于matlab GUI模拟冰山运输系统(参数可调)【含Matlab源码 895期】
- 196.删除重复的电子邮箱
- PHP、Java、Python、C、C++ 这几种编程语言都各有什么特点或优点
- 动易百度快照劫持,百度快照被劫持了怎么办?
- 电气AutoCAD基础教学(一)——入门技巧
- 吃透JAVA的Stream流操作,多年实践总结
- 超微x9dai 跳线_秒变MacPro!至强E5双路CPU,超微X9DAi主板,Quadro K5000黑苹果
- Spring整合数据源报错严重: create connection SQLException, url: jdbc:mysql://localhost:3306/library, errorCode
- 计算机蓝牙快捷键,如何打开Windows10笔记本电脑的蓝牙,快捷键打开笔记本电脑的蓝牙!...
- 你所不了解的分布性系统之高可用篇
- 【教程】花100块钱DIY一台民航客机雷达
- Word~Word修改行间距磅值