0.1、css引入界面的方式:
内联式:通过标签的style属性,在标签上直接写样式。
<div style="width:100px; height:100px; background:red "></div>
嵌入式:通过style标签,在网页上创建嵌入的样式表。
<style type="text/css">
div{ width:100px; height:100px; background:red }
</style>
外链式:通过link标签,链接外部样式文件到页面中。
<link rel="stylesheet" type="text/css" href="css/main.css">
0.2、css选择器:
标签选择器
类选择器
层级选择器
0.3、 属性(常用):
布局常用:
width,height,background,border,solid(实线),padding,
margin,float,opacity:0.3(元素透明度),z-index:1(表示层叠,值越大越上面)
文本常用样式属性;
color,font-size ,font-family ,font-weight ,line-height,
text-decoration(去下划线),text-align(文字对齐方式),text-indent(文字首行缩进)
0.4、元素溢出:
overflow:visible(默认值)不会被修剪
hidden:被修剪,其余内容不可见
scroll:被修剪,但是浏览器会有一个滚动条看其余内容
auto:如果被修剪就会有滚动条
0.5、分栏:
<p>这一段文字用来测试分栏。这一段文字用来测试分栏。这一段文字用来测试分栏。</p>
p {
width: 200px; /* 把段落的宽度设短一点,便于效果的展现 */
column-count: 3; /* 设定需要分几栏 */
column-gap: 20px; /* 设定两栏间隔 */
}
1.1、盒模型:
包括:内容(content),填充(padding),边框(border),边距(margin).
我们给元素设置的高度,是内容(content)的高度,再给元素添加填充(padding),
这样的话会让原本的元素看起来更高,因为会撑起
1.2、无语义:没有任何样式的元素(就是没有行高,间距,颜色之类的东西),比如div
1.2 以边框为界的盒模型:
<box-sizing:border-box></box-sizing:border-box>
有些时候,我们不希望给元素填充(padding)时,元素高度改变,不利于我们布局,就可以
使用上面的方法,在IE的怪异模式下,使用了这种模式
...
<div class="box-model">box-model</div>
...
<typle>
.box-model {
box-sizing: border-box; /* 设置成以边框为界的盒模型 */
border: 1px solid red;
height: 80px;
padding: 10px;
}
</typle>
1.3、行内元素(inline),块元素(block)
布局一般都用块元素:
1.3.1 块元素可以设置宽高,默认占据一行,行内元素不能设置宽高,宽度由其内容决定
1.3.2 块元素默认没有高度,有内容才会有高度.
行内元素默认没高度和宽度,有内容才会有,行内元素虽然不能设置宽高,但是设置
成绝对定位(absolute)后,可以设置宽高.
1.3.3 块元素:
<div></div>
<p></p>
<ul></ul>
<li></li>
<table></table>
<form></form>
<header></header>
<section>
<option></option>
</section>
<footer></footer>
<dl></dl>
<dd></dd>
行内元素:
<a href=""></a>
<font></font>
<em></em>
<strong></strong>
<i></i>
<img src="" alt="">
<span></span>
空元素:
<br>
<hr>
<img>
<input type="text">
<link rel="stylesheet" href="">
<meta>
1.3.4 一行只有一个块元素,但是行内元素可以有很多个,空的元素将在布局的时候消失
1.3.5 行内块元素:
inline-block
三个li并列,都设置成inline-block。当对最左边的元素设置display:none;时,
其他两个li会下沉到容器的底部。此时,需要对这两个li设置顶部对齐(vertical-align:top;)
<ul class="nav" id="nav">
<li class="left"><div class="hidden">首页</div></li>
<li class="center"><div>文章</div></li>
<li class="right"><div>留言</div></li>
</ul>
.hidden {display: none;}
.left {height: 50px;}
.center,.right {vertical-align: top;}
1.3.6 隐藏元素:
visibility:hidden;
display:none; //隐藏元素并且会清除原本占用的布局空间
1.4、位置(position):
1.4.1 绝对(absolute),相对(relative),固定(fixed)
移动:left,right,top,bottom
清除布局空间的定位(absolute fixed)
1.4.2 固定定位(fixed)不会随着鼠标的滚动而改变位置。
他真的是固定屏幕的某一个位置的,比较常见的是网页右下角的广告
绝对定位(absolute)的定位原点是非默认定位(static)的父节点。
可以是absolute fixed relative,如果父节点没有这些,那定位原点就是body了。
使用了这两种定位中的一种,元素原本占用的布局空间将会消失(脱离文档流)
1.4.5 相对定位(relative):
相对原有位置定位。
使用这种方法,元素原本占用的布局会保留。
父级采用relative,子代采用absolute。则子代的定位原点变为父级元素的左上角
默认定位:static
浮动(float):
居中一个浮动元素:
Width:500px ; height:300px;//高度可以不设
Margin: -150px 0 0 -250px;
居中一个普通元素:
margin:0 auto;
清除浮动(overflow:hidden;):
使用这种方法意味着,浮动元素得有一个父元素,并给父元素添加overflow:hidden;属性。
.nav {
overflow: hidden;
}
清除浮动(.clear):
这种方法需要在浮动元素后面添加一个空的节点,然后写上clear属性。兼容IE6需要添加zoom:1;。
<div class="clear"></div> <!--用来清楚浮动的空元素-->
css选择符有哪些:
id选择器( # myid)
类选择器(.myclassname)
标签选择器(div, h1, p)
相邻选择器(h1 + p)
子选择器(ul < li)
后代选择器(li a)
通配符选择器( * )
属性选择器(a[rel = “external”])
伪类选择器(a: hover, li: nth - child)
1.5、 display的值
block 象块类型元素一样显示。
none 缺省值。向行内元素类型一样显示。
inline-block 象行内元素一样显示,但其内容象块类型元素一样显示。
list-item 象块类型元素一样显示,并添加样式列表标记。
1.6、 权重:
标签:权重为:1
类选择器:权重为:10
id选择器:权重为100
权重可以相加的:如#id div的权重就是101
内嵌在标签里面的style属性的权重为1000
权重相同时,最后定义的样式会起作用,一般都要尽量避免这样的情况
1.7、 优雅降级:
web站点在所有新式浏览器中都能正常工作,如果是老式浏览器,就会检查是否能正常工作,
如果不能支持功能就为那些浏览器增加候选方案,使之在旧式浏览器上能以某种形式降级体验
,但是却不至于完全失效.
渐进增强:
从被所有浏览器支持的基本功能开始,逐步地添加那些只有新式浏览器才支持的功能,
向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时,它们会自动地呈现出来并发挥作用。
- WEB前端开发CSS基础样式全面总结
Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...
- 前端之CSS基础
前端之CSS 1. CSS CSS定义如何显示HTML元素. 当浏览器读到一个样式表,他就会按照这个样式表来对文档进行格式化(渲染). 3.CSS语法 1)CSS实例 每个CSS由两部分组成: 选择器 ...
- Web前端温故知新-CSS基础
一.CSS定义与编写CSS 1.1 CSS的定义 全名:Cascading Style Sheets -> 层叠样式表 定义:CSS成为层叠样式表,它主要用于设置HTML页面中的文本内容(字体. ...
- html前端之css基础
CSS 属性导航: CSS 属性组 动画 背景 边框和轮廓 框 颜色 内容页的媒体属性 尺寸 盒子模型(新) 盒子模型(旧) 字体 内容生成 网格 超链接 线框 列表 外边距 字幕 多列 内边距 页面 ...
- Web前端开发css基础样式总结
颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值 ...
- 前端学习——css基础知识,选择器与html模板、值得收藏的html标签
一.css需要的html(采用html5标准) DTD,文档类型声明: <!Doctype html> 文本编码声明: <meta charset="utf-8" ...
- 好程序员web前端分享CSS基础篇
学习目标 1.CSS简介 2.CSS语法 3.样式的创建 4.两种引入外部样式表的区别 5.样式表的优先级和作用域 6.CSS选择器 7.选择器的权重 8.浮动属性的简单应用 9.HTML.CSS注释 ...
- 前端部分-CSS基础介绍
CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素.也就是定义相应的标签语言来定制显示样式达到一定的显示效果. 每个CSS样式由两个组成部分:选择器和 ...
- python之 前端HTML/CSS基础知识学习笔记
1. 文件结构: HTML文件的固定结构: <html> <head>...</head> <body>...</body> </ht ...
随机推荐
- textarea的实现
由于限制字数是用原有的 maxlength会有问题,所以用一般会用js控制,今天用到三种: (一)html: <body> <form name=myform action=&quo ...
- Android开发过程中部分报错解决方法。
初学Android,最近在使用zxing开发一个条码扫描解析的安卓项目中,遇到以下几个问题.贴出来以供参考. 1.Http请求错误 Android4.0以上要求不能把网络请求的操作放在主线程里操 ...
- MVC类库视图在UI使用方法
在类库中固定文件:Controller Views 引用一下两个程序集(类库和UI项目都需要引用)(似乎只需要引用mvc的,build似乎在引用文件中不见了?有空测试一下) 如此方式,一个登录需要是 ...
- 【Sql server: T-Sql 技术内幕 系列】之索引篇
本文系 T-Sql技术内幕系列读后感. 用过数据库的程序猿都知道,索引可以极大的优化sql语句的执行时间,但是您要问我,怎么减少的,我只能说:"抱歉,我也不太清楚." 带着这个疑惑 ...
- Swiper双向轮播
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- angular - webpack2 例子
用一周多的时间做了一个简易的wap站 之前研究过webpack但是一直没用过,这次公司要做一个h5网站,正好拿来练练手,话说angular1x对移动端不是很友好,但主要是angular1x比较熟悉,上 ...
- C/C++:函数的调用约定(Calling Convention)和名称修饰(Decorated Name)以及两者不匹配引起的问题
转自:http://blog.csdn.net/zskof/article/details/3475182 注:C++有着与C不同的名称修饰,主要是为了解决重载(overload):调用约定则影响函数 ...
- 视频监控——从其他浏览器打开低版本IE方案
1. 方案背景 由于低版本IE浏览器并不支持很多新的页面技术,导致部分页面效果难以实现;另一方面IE浏览器版本与操作系统绑定,难以统一,不同版本IE间的不兼容导致多种兼容性问题,因此本项目暂定采用Ch ...
- (五)TortoiseSVN 客户端-----安装
svn客户端类型 svn客户端需要通过网络访问svn服务端提交文件.查询文件等,可通过以下客户端类型访问svn服务端: 使用Subversion提供的客户端命令,使用方式:在命令行下输入命令操作. 使 ...
- windows下使用VNC进行远程连接
在 windows 电脑上安装 VNC,包含 VNC server 和 VNC viewer,如果仅需要被操控或操控他人,选择型下载安装 VNC server 或 VNC viewer 即可. 在需要 ...