前端学习之--CSS
CSS 常用帮助文档
CSS:被用来同时控制多重网页的样式和布局。
HTML页面中CSS样式的写法有3种:
1:标签中写入
<body style='margin o auto;'>
2:head头标签内
<style>
body { margin:0 auto;}
</style>
3:head头标签内引入css文件
<link rel='stylesheet' href='commons.css' />
优先级:标签上的style最高,编写顺序,就近原则
CSS注释方法:/* ... */
CSS 选择器有以下几种:
第一种:id选择器(#i1)
<标签 id='i1'>
#i1{
background-color: #00000;
height: 48px;
}
第二种:class选择器
<标签 class='c1'></标签>
.c1{
background-color: #00000;
height: 48px;
}
第三种: 标签选择器
<div></标签>
div{
background-color: #00000;
height: 48px;
}
第四种:层级模式(可以多个层级)
<span><div>test</div></span>
span div{ ... } 表示span下的div标签使用此样式
.c1 div{...} 表示class为c1下的div标签
第五种:组合选择器
<div id='i1'></div>
<div id='i2'></div>
<div id='i3'></div>
#i1,#i2,#i3{...}
.c1,.c2,.c3{...}
第六种:属性选择器,对选择到的标签再通过属性进行一次赛选
<input type='text'>
input[type='text']{width:100px;height:200px;}
以下主要介绍些常用的css样式
border: 1px solid red; 边框属性依次为,边框宽度,边框样式,边框颜色
height:标签高度
width:标签宽度(像素,百分比)
min-height 设置元素的最小高度。
min-width 设置元素的最小宽度。
line-height:垂直方向根据标签高度居中
text-aligh:center 水平方向居中
color:字体颜色
font-size:字体大小
font-weight:字体加粗
float:标签进行漂移,也就是块级标签堆叠,(left 左漂,right 右漂),注意:如果将父级覆盖,则在最后使用参数:<style='clear:both;'>
display:可选参数如下
- block:将内联标签转换为块级标签
- inline:将块级标签转换为内联标签
- inline-block:同时具有块级标签和内联标签的属性。(内联标签不具有padding,margin,高,宽等属性设置)
- none:设置此属性的标签消失
padding:内边距,元素边框与元素内容之间的空间
margin:外边距,定义元素周围的空间,div整体居中(0,auto)
position:元素定位,参数如下
- fixed:固定元素在游览器窗口的指定位置,不随页面的滚动而移动。 举例:(position:fixed,top:0,left:0,right:0)
- relative + absolute:这2个元素要一起使用,二者之间是相对定位
- Relative 定位:相对定位元素的定位是相对其正常位置。
- Absolute 定位:绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>
举例:
<div style='position:relative;'>
<div style='position:absolute;top:0,left:0;'></div>
</div>
这里absolute的位置是相对于relative标签的位置周边定位
opacity:透明度,取值范围(0 - 1)
z-index:层级顺序,要结合opcity进行透明度设定。
2层写法举例:
<div style='z-index:10;position:fixed;top:50px;left:100px;background-color:white;'>
# 这里在引入一层,需要通过z-index:10值的高低来确定优先度,数字越大越在最上层。
<div style='z-index:9;position:fixed;background-color:black;top:0,bottom:0;right:0;left;0;opacity:0.5;></div> # 这个就是设置透明度(1就完全覆盖)
<div style='height:5000px;background-color:green;'>sdf</div>
overflow:设置当元素的内容溢出其区域时发生的事情,参数如下
- auto:当图片大小超过设定的大小,则在设定的范围出现滑轮。
- hidden:当图片大小超过设定的大小,则只显示设定大小的窗口。
hover:当鼠标移动到当前标签上时,以下css属性才生效,
写法:.pg-header .menu:hover{ background-color:blue}
background-image:背景图像。body {background-image:url('paper.gif');}
background-color:背景颜色,使用在body。 body {background-color:#b0c4de;}
background-repeat:背景图像增加方式,参数如下:
- repeat-x: 只横向增加
- repeat-y: 只纵向增加
- no-repeat: 不堆叠
background-position:改变图像在背景中的位置,如:background-position:10px,10px;
实例:账户输入框内最右侧增加用户名的图片
<div style='height:35px;width:400px;position;relative;'>
<input type='text' style='height:35px;width:370px;padding-right:30px;'>
<span style='position:absolute;right:6px;top:10px;background-image:url(i_name.jpg);height:16px;width:16px;display:inline-block;'></span>
</div>
技巧:
1:CSS重用功能
<style>
.c{ 共有}
.c1{ 独有}
.c2{ 独有}
</style>
<div class='c,c1'></div>
<div class='c,c2'></div>
2:默认图片的外边框是1px,去掉:img:{broder:0}
举例:常用页面的布局
1:主站的布局
<div class='pg-header'>
<div style='width:980px;margin:0 auto;'>页面头</div>
</div>
<div class='pg-content'>
<div style='width:980px;margin:0 auto;'>页面体</div>
</div>
<div class='pg-footer'>
<div style='width:980px;margin:0 auto;'>页面尾</div>
</div>
前端学习之--CSS的更多相关文章
- 前端学习:CSS的学习总结(图解)
前端学习:CSS的学习总结(图解) CSS代码笔记 CSS简介 css的引入方式和书写规范 CSS选择器 CSS属性 CSS盒子模型 CSS的定位
- 2016.01.22 前端学习 HTML/CSS
学习HTML/CSS http://edu.51cto.com/course/course_id-3116.html 明日实践
- 前端学习 之 CSS(三)
九:浮动 浮动是css里面布局最多的一个属性,也是很重要的一个属性. float:表示浮动的意思. 属性值: none: 表示不浮动,默认 left: 表示左浮动 right:表示右浮动 例: htm ...
- 前端学习之CSS
CSS介绍 CSS(Cascading Style Sheet, 层叠样式表)定义如何显示HTML元素, 给HTML设置样式, 让它更加美观. 当浏览器读到一个样式表, 它就会按照这个样式表来对文档进 ...
- 前端学习 -- Html&Css -- 条件Hack 和属性Hack
条件Hack 语法: <!--[if <keywords>? IE <version>?]> HTML代码块 <![endif]--> <keyw ...
- 前端学习笔记——CSS选择器
学习css选择器之前我们先了解下css规则: CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明: 选择器通常是需要改变样式的 HTML 元素. 每条声明由一个属性和一个值组成. 1.id选 ...
- 前端学习 之 CSS(二)
五:继承性和层叠性 css有两大特性,即继承性和层叠性. 1. 继承性 面向对象语言都会存在继承的概念,在面向对象语言中,继承的特点:继承了父类的属性和方法.那么我们现在主要研究css,css就是在设 ...
- 前端学习 之 CSS(一)
一:什么是 CSS? ·CSS 指层叠样式表 (Cascading Style Sheets) ·样式定义如何显示 HTML 元素 ·样式通常存储在样式表中 ·把样式添加到 HTML 4.0 中,是为 ...
- 前端学习笔记 - Css初级篇
有话先说:我是一只菜鸟,一只都是,从前是现在也是. CSS中的会计元素与行内元素 块级元素特性:占据一整行,总是重起一行并且后面的元素也必须另起一行显示.内联元素特性:和其他内联元素显示在同一行. 可 ...
- web前端学习笔记(CSS变化宽度布局)
一.“1-2-1”单列变宽布局: 对于变宽度的布局,首先要使内容的整体宽度随浏览器窗口宽度的变化而变化.因此中间的container容器中的左右两列的总宽度也会变化,这样就会产生不同的情况.这两列是按 ...
随机推荐
- python pandas 中 loc & iloc 用法区别
转自:https://blog.csdn.net/qq_21840201/article/details/80725433 ### 随机生DataFrame 类型数据import pandas as ...
- IOS之UIStepper控件详解
在iOS5中新增了一个数字输入控件UIStepper,它可以递进式输入数量.UIStepper继承自UIControl,它主要的事件是UIControlEventValueChanged,每当它的值改 ...
- ABAP的HTTP_GET和Linux的curl
curl是利用URL语法在命令行方式下工作的开源文件传输工具,广泛应用在Unix,多种Linux发行版中. 在Windows系统下也有移植版. curl尤其被广泛应用在github上众多开源软件和框架 ...
- raid 0 1 5 10 总结的知识点
raid 0 1 5 10 raid 发的别名条带 raid 0 读取性能最高需要磁盘2*N个(N>0)代表所有raid级别中的最高存储性能,其实原理就是把连续的数据分散到多个磁盘上存取,这样, ...
- 7-Java-C(冰雹数)
题目描述: 任意给定一个正整数N, 如果是偶数,执行: N / 2 如果是奇数,执行: N * 3 + 1 生成的新的数字再执行同样的动作,循环往复. 通过观察发现,这个数字会一会儿上升到很高, 一会 ...
- python3.7 socket通信
def OpenClient(self,e): global line line = socket.socket(socket.AF_INET,socket.SOCK_STREAM) line.bin ...
- Perl语言入门: 斜线不是元字符,所以在不作为分隔符时不需要加上反斜线。
Perl语言入门: 斜线不是元字符,所以在不作为分隔符时不需要加上反斜线.
- git 设置ss代理
git config --global https.proxy http://127.0.0.1:1080 git config --global https.proxy https:// ...
- 【转载】WampServer图标显示红色后变成橙色怎么解决
WampServer就是Windows Apache Mysql PHP集成安装环境,即在window下的apache.php和mysql的服务器软件. 工具/原料 WampServer 方法/步 ...
- 解决CSDN阅读全部需要登录的问题
现在CSDN网站每次点击“阅读全部”的时候,必须要登录才能展开,很不方便.解决方法如下:点击F12打开开发者工具,点击Console,将下面两行代码粘贴进去即可: $("div.articl ...