html学习-css
1.css初识
css 中文解释：层叠样式表，把html比作骨骼的话，css就是衣服，他的外在都能通过css来修饰，js则是肌肉，能使html动起来。产生用户交互。。。
1.1css样式表类型
css样式类型：
行内样式：
内部样式：
外部样式（推荐使用）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--外部样式：直接将css写入到css文件中，加载使用-->
<link rel="stylesheet" href="css/top.css">
<style>
/*内部样式：将样式写到head中的style中*/
#pg-index{
background-color: #00AA88;
}
</style>
</head>
<body>
<!--行内样式：直接将css样式写入到标签内部-->
<div id="pg-index" style="color: red"></div>
</body>
</html>
1.2css选择器类型
标签选择器:（html标签）
类别选择器:（class选择器）
ID选择器:
层级选择器:
分组选择器:
通用选择器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--外部样式：直接将css写入到css文件中，加载使用-->
<link rel="stylesheet" href="css/top.css">
<style>
/*内部样式：将样式写到head中的style中*/
*{
/*通用选择器*/
font-family: "Microsoft YaHei", "Hiragino Sans GB";
}
body{
/*标签选择器*/
margin: 0;
}
#pg-index{
/*id选择器*/
background-color: #00AA88;
}
.pg-index2{
/*类选择器(class选择器)*/
float: right;
}
#pg-index p{
/*层级选择器*/
font-size: 20px;
}
#pg-index,.pg-index2{
/*分组选择器*/
margin-left: 10px;
}
#pg-index p:hover{
/*伪类选择器*/
background-color: #00CC00;
}
</style>
</head>
<body>
<!--行内样式：直接将css样式写入到标签内部-->
<div id="pg-index" class="pg-index2" style="color: red">
<p>主体内容</p>
</div>
</body>
</html>
伪类选择器:
:link 定义超链接默认样式
:visited 定义访问过的样式
:hover 定义鼠标经过的样式
:active 定义鼠标按下的样式 a:link { color:#ff0000; } /*默认样式，超链接文字为红色*/
a:visited { color:#00ff00; } /*访问过后，超链接文字为绿色*/
a:hover { color:#0000ff; } /*鼠标经过，超链接文字为蓝色*/
a:active { color:#ffff00; } /*鼠标按下时，超链接文字为黄色*/
1.3css语法结构
每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束
在css的三个组成部分中，“对象”是很重要的，它指定了对哪些网页元素进行设置，因此，它有一个专门的名称——选择器（selector）
1.4css选择器优先级
<style type="text/css">
#show1{color:gold;}
.show {color:pink;}
h1 {color:red;}
* {color:green;}
</style>
</head>
<body>
<h1 id="show1" class="show" style="color:gray;">这是选择器优先级测试</h1>
</body>
1.5css文本段落属性及边框
边框设置：border
宽度，样式，颜色 (border: 1px solid red;)
文本行高：line-height
语法： line-height：行高值(像素)
水平对齐： text-align
left：左对齐；
right：右对齐
center：居中对齐
body{
/*标签选择器*/
border: 1px solid red;
width: 100%;
text-align: center;
height: 50px;
line-height: 50px;
margin: 0;
}
1.6css文字属性
字号：font-size
语法：font-size：大小的取值(像素值)
文字颜色：color
语法：Color：颜色取值方式
color:#292378; //6个十六进制数获得颜色
color:#A64; //#AA6644的缩写
color:red; //颜色关键字定义颜色
color:rgb(100,159,170); //rgb定义颜色
1.7css背景属性
背景颜色：background-color
关键字：red pink orange
背景图像：background-image
使用background-image属性可以设置元素的背景图像。
语法：background-image：url（图像地址）
背景重复：background-repeat
语法：background-repeat：取值
Repeat(默认) 背景图像平铺排满整个网页
repeat-x 背景图像只在水平方向上平铺；
repeat-y 背景图像只在垂直方向上平铺。
no-repeat 背景图像不平铺
背景位置：background-position
background-position-x:200px ;
background-position-y:100px;
1.8css背景图片实例
<style>
#myimg{
border:1px solid red;
height:18px;
width:18px;
background-image: url('2.png');
background-position-y:138px;
}
</style>
<body>
<div id="myimg"> </div>
</body>
1.9css位置属性
margin外边距填充属性
边距属性
margin是对外元素的距离，用来控制元素本身的浮动位置
四边距margin
上边距margin-top
下边距margin-bottom
左边距margin-left
右边距margin-right
margin 10px 20px 30px 40px;
提供一个，用于的四边；
提供两个，第一个用于上－下，第二个用于左－右；
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下；
提供四个参数值，将按上－右－下－左的顺序作用于四边；
居中显示
padding内边距填充属性
padding是对内元素，用来控制元素内部元素的位置
四边填充 padding
上填充 padding-top
下填充 padding-bottom
左填充 padding-left
右填充 padding-right
padding 10px 20px 30px 40px;
提供一个，用于的四边；
提供两个，第一个用于上－下，第二个用于左－右；
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下；
提供四个参数值，将按上－右－下－左的顺序作用于四边；
2.css浮动属性
2.1css显示属性
Display显示属性：
block：将元素变成块级标签，可以设置高度和宽度
Inline：将元素变成行内标签，不能设置高度和宽度
Inline-block：同时具有两种
none：标签消失 <span style="background-color: gray;height:70px;width:20px;">行内标签</span>
2.2css溢出处理
2.3css位置属性
2.4css层级优先级
参考链接：
http://www.runoob.com/cssref/css-reference.html
html学习-css的更多相关文章
- 学习 CSS 样式
1.CSS浮动 : http://www.cnblogs.com/zhongxinWang/archive/2013/03/27/2984764.html (1)一个重要结论: ...
- css知多少（2）——学习css的思路
两周之前写过该系列的第一篇,其实当时只是一个想法,这段时间迟迟未更新,是在思考一个解决过程.现在初有成效,就开更吧. 1． 一个段子 开题不必太严肃,写博客也不像写书,像聊天似的写东西是最好的表达方式 ...
- 开始学习css
今天开始学习css:应用一本<HTML5与CSS3网页设计基础> 先学习css样式规则声明. Body{ color:blue} 对应:选择符:{声明属性:声明值}: Background ...
- HTML+CSS学习笔记 (6) - 开始学习CSS
HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...
- 如何深入学习CSS
学习CSS有了一定基础后,有的人会觉得好象没有什么学的．因为知道一些基本的理论性的东西．CSS说它容易是因为它的知识点有限．说它难学就在于各浏览器对CSS的支持程度不同．如何深入学习我给出以下几点见意 ...
- 【图片版】学习CSS网格布局
简言 CSS网格布局(Grid)是一套二维的页面布局系统,它的出现将完全颠覆页面布局的传统方式.传统的CSS页面布局 一直不够理想.包括table布局.浮动.定位及内联块等方式,从本质上都是Hack的 ...
- 学习CSS的思路（转）
两周之前写过该系列的第一篇,其实当时只是一个想法,这段时间迟迟未更新,是在思考一个解决过程.现在初有成效,就开更吧. 1． 一个段子 开题不必太严肃,写博客也不像写书,像聊天似的写东西是最好的表达方式 ...
- 《学习CSS布局》学习笔记
近几天做了一个小的企业展示网站.虽然页面是在模板的基础上改的,但改的多了不熟悉CSS也很麻烦.正好我看到了学习CSS布局这个网站,于是补习了一下CSS知识. CSS的显示 CSS的元素分为两类:块级元 ...
- 学习css盒子模型
在这一周,我学习了css,在没有学习css之前,我一直都觉得布局很难,样式特别难调,但是学习了css盒子模型之后我就觉得欸,其实还挺简单的,下面就来看看我学习的css吧. CSS 盒子模型(Box M ...
- 学习css常用基本层级伪类属性选择器
常见的css选择器包含:常用选择器.基本选择器.层级选择器.伪类选择器.属性选择器,其中常用选择器分为:1.html选择符*{}//给页面上所有的标签设置模式:2.类选择符.hcls{}//给clas ...
随机推荐
- 转载乙醇大师的appium简明教程
appium简明教程(11)——使用resource id定位(仅支持安卓4.3以上系统) 乙醇 2014-06-28 21:01 阅读:16406 评论:21 appium简明教程(10)——控件定 ...
- [CEOI2004]锯木厂选址
link 试题分析 做这种题就应该去先写个暴力代码 #include<iostream> #include<cstring> #include<cstdio> #i ...
- 【agc012E】Camel and Oases
Portal --> agc012 Description 有一排点,两点间有一定距离,初始的时候有一个行走值\(v\),如果说两点间距离不超过\(v\),那么可以在这两点间自由行走,如果当前\ ...
- PID控制算法的c语言实现十二 模糊PID的参数整定
这几天一直在考虑如何能够把这一节的内容说清楚,对于PID而言应用并没有多大难度,按照基本的算法设计思路和成熟的参数整定方法,就算是没有经过特殊训练和培训的人,也能够在较短的时间内容学会使用PID算法. ...
- windows环境libevent搭建和demo分析
libevent框架之前有做过分析,这次是谈谈如何将libevent搭建在vs工作环境下, 并且编写一个demo进行测试.测试过程中会再一次带大家分析消息是怎么传递 的. 我的libevent版本li ...
- 修改Docker默认镜像和容器的存储位置
一.Why Docker默认的镜像和容器存储位置在/var/lib/docker中,如果仅仅是做测试,我们可能没有必要修改,但是当大量使用的时候,我们可能就要默认存储的位置了. 二.How 2.1 修 ...
- tomcat maven插件启动报错tomcat-users.xml cannot be read
tomcat maven插件启动报错tomcat-users.xml cannot be read [ERROR] Failed to execute goal org.codehaus.mojo:t ...
- OpenCV---Numpy数组的使用以及创建图片
一:对头像的所有像素进行访问,并UI图像进行像素取反 (一)for循环取反 import cv2 as cv import numpy as np def access_pixels(image): ...
- 关于WEB-INF目录不提供外部访问及JSP引用 js，css 文件路径问题
在 web 项目开发过程中,我们常常使用到 JSP,以及对静态资源,js,css 等引用,但是我们应该把这些资源文件放在哪个目录下面咧,怎么引用. 当然如果是前后端分离的项目倒不用考虑这些. WEB- ...
- Web Api返回值
首先:注明,我还没这么强的功力啦!这是我看的网上的,因为怕博主删除就自己复制了一下 博主的网址是:http://www.cnblogs.com/landeanfen/p/5501487.html 使用 ...