CSS

CSS（层叠样式表）是用来美化页面用的，可以对页面元素进行更精细的设置，样式主要描述元素的字体颜色、背景颜色、边框等。

CSS主要有元素内联、页面嵌入和外部引用三种使用方式。CSS是描述元素的皮肤！

元素内联，直接将样式写入元素的style属性中，<input type="text" readonly="readonly" style="background-color: #FF00FF" />，style="color:Red;background-color: #FF00FF"为元素内联，适用于样式没有可复用性的场合。
页面嵌入：在head中加入

<style type="text/css">

input{border-color:Yellow;color:Red;}

</style>

表示页面中所有input都是采用指定的样式。适合于样式复用，减小页面体积

<style type="text/css">

	P

	{

	color:Red;

	font-weight:bold;

	}

</style>

所有的P标签都变成红色字体，加粗。

外部引用，将css内容写入css后缀的文件

div{background:yellow}

然后在页面中引用，在head中加入

<link type="text/css" rel="Stylesheet" href="s1.css" />

适合于多个页面共享css。
更变原则：就近原则

常见样式

css计量单位：css中表示宽度、距离时有多种计量单位：px（像素）、30%（百分比）、em（相对单位）等。width:20px。
background-color:Red;背景颜色；color：文本颜色
复合样式 background border
border-style:solid;边框风格，实线solid（默认是没有），还有dotted(点)等值；border-color：边框颜色；border-width：边框宽度(默认是0)。例子：style="border-color:Red;border-width:1px;border-style:dotted;"
display：元素是否显示，可选值none（不显示,不占地儿）、block （显示为块级元素，此元素前后会带有换行符。）、inline（显示为内联元素，元素前后没有换行符）等。
cursor，鼠标在元素上时显示的光标图标，可选值：cursor（默认光标）、pointer（超链接上的手）、text（输入Bean）、wait（忙沙漏）、help（帮助）等。还可以通过cursor:url(dinosau2.ani)使用ani、cur格式的自定义光标图片。
LI不显示圆点：LIST-STYLE-TYPE: none;一般设在li或者ul上
应用：图片：不显示边框，见备注

图片：不显示边框

IMG {

	border:0px;BORDER-BOTTOM: medium none;

	BORDER-LEFT: medium none;

	BORDER-TOP: medium none;

	BORDER-RIGHT: medium none

}

例子外部引用

*

{

	/* 所有的元素 */

	margin:0;

	padding:0;

	color:Red;

}

body

{

	background:red url(/images/back_image.GIF);

}

span

{

	/* block 块

	display:block;*/

	cursor:pointer;

	color:Blue;

	text-decoration:underline;

}

input

{

	color:Green;

}

li

{

	/* 去掉ul前面的黑点 */

	list-style-type:none;

}

样式选择器

对于非元素内联的样式需要定义样式选择器，通俗的说就是这个样式适合于哪些元素，三种：标签选择器、class选择器和id选择器。

标签选择器 input{border-color:Yellow;color:Red;}，对于指定的标签采用统一的样式
class选择器，以定义一个命名的样式，然后在用到它的时候设定元素的class属性为样式的名称，还可以同时设定多个class，名称之间加空格

.d1

{

	color:Red;

	width:100px;

}

.d2

{

	color:Blue;

	width:200px;

}

.d3

{

	color:Green;

	width:300px;

}

<div class="d1">

	123123123

</div>

<div class="d2">

	abc

</div>

<div class="d3">

	啊打发

</div>

样式名称开头加“.”

.warning{background:Yellow;}

.highlight{font-size:xx-large;cursor:help;}

<table>

<tr>

<td class="highlight">aaa</td>

<td class="warning">bb</td>

<td class="highlight warning">ccc</td>

</tr>

</table>

标签+类选择器:通过指定标签来确定不同的类适用范围

label.name

{

	background-color:Gray;

}

input.name

{

	color:Blue;

}

<label for="name" class="name">用户名：</label>

<input class="name" id="name" type="text" value="" />

id选择器：与类选择器不同的地方就是.改成了#。

#wrap

{

	border:solid 1px blue;

	width:300px;

	height:300px;

}

<div id="wrap">

main

</div>

包含选择器：设置div中strong标签的格式，div中所有strong

div  strong

{

	color:Red;

}

<strong>测试</strong>

<div>

	<strong>这是左边栏</strong>

	left

</div>

后代选择器：直接属于div的strong才会属于这个样式。

div strong

{

	color:Red;

}

<div>

	<strong>这是左边栏</strong>

	left

</div>

组合选择器：多个标签一个样式，组合选择器可以使用类选择器.h3,.p,.span {}

h3,p,span

{

	color:Yellow;

}

<h3>标题3</h3>

<p>这是段落</p>

<span>这是span</span>

伪选择器：超链接使用
- A:visited：超链接点击过的样式；A:visited {TEXT-DECORATION: none}下划线
- A:active：选中超链接时的样式；A:active {TEXT-DECORATION: none}
- A:link：超链接未被访问时的状态；A:link {TEXT-DECORATION: none}
- A:hover：鼠标移到超链接时的状态。A:hover {TEXT-DECORATION: underline}

a:visited

{

	color:Gray;

}

a:link

{

	color:Red;

}

a:hover

{

	color:Black;

	font-style:italic;

}

a:active

{

	color:Yellow;

}

<a href="http://www.itcast.cn">传智播客</a>

<a href="http://www.csdn.com">csdn</a>

<a href="http://www.cnbeta.com">cnbeta</a>

<a href="http://www.123.com">123</a>

传智博客视频_布局

布局的分类：表格布局，框架布局，div+css布局

表格布局：表格套表格，代码多，table显示很慢，一块块的显示就比较麻烦，显示圆角就比较麻烦
框架布局：多个页面来显示：
- Frameset 框架页里不能有body

<head>

<title></title>

</head>

<frameset rows="30%,*">

  <frame name="top" src="top.htm" noresize="noresize"/>

  <frameset cols="20%,*">

    <frame name="left" src="left.htm" noresize="noresize"/>

    <frame name="main" src="main.htm" noresize="noresize"/>

  </frameset>

</frameset>

left.html

<body>

<ul>

<li><a href="1-注册页面.htm" target="main">注册</a></li>

<li><a href="5-选择器.htm" target="if">登陆</a></li>

</ul>

</body>

- iframe 嵌入页面

<iframe src="iframe.htm" name="0" width="0" height="0"></iframe>

<body>

adsfasdf

asdf

<iframe src="1-注册页面.htm" width="0" height="0"></iframe>

adsf

</body>

main.html

iframe：在一个页面中嵌入一个页面

<body>

<iframe src="1-注册页面.htm" width="500px" height="200px" name="if"></iframe>

adsf

</body>

div+css布局：
网页布局就是“这块内容显示在左边，那两块内容并排显示，那块内容漂浮在页面上”。
不要使用<table>进行布局，因为：table可能会在所有tr、td加载完成以后才显示，所以加载完成之前界面是一片空白；用table布局会将布局方式写在html中，违反了“语义性”原则；用table会影响搜索引擎的抓取，不利于SEO。因此Table用来表达真是表格状数据的东西，布局用Div(层)+Css来做,Div用来圈定元素，CSS用来定义元素的位置。
Div+CSS就是将要布局的内容用<div>切成块，然后使用css描述每个块的大小、位置等。
布局最重要的一个属性就是float，

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

<title></title>

<link href="css/style.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div id="wrap">

<div id="head">

<div id="logo">

<img src="images/back_image.GIF" width="100px" height="50px" /></div>

<div id="menu">

<ul>

<li>首页</li>

<li>播客</li>

<li>相册</li>

<li>关于</li>

</ul>

</div>

</div>

<div id="body">

<div id="nav">

<ul>

<li>好好学习</li>

<li>天天向上</li>

<li>不要睡觉</li>

</ul>

</div>

<div id="content">内容</div>

</div>

<div id="footer">版权</div>

</div>

</body>

</html>

*

{

	margin:0px;

	padding:0px;

}

body

{

	background-color:Gray;

}

#wrap

{

	width:98%;

	height:500px;

	margin:0px auto;

}

#head

{

	height:150px;

	background-color:Red;

}

#head #menu

{

	margin:80px auto 0px auto;

	padding-left:200px;

}

#head #menu ul

{

	width:400px;

}

#head #menu li

{

	float:left;

	width:100px;

	list-style-type:none;

}

#body

{

	height:800px;

	background-color:White;

}

#body #nav

{

	/* 强制英文换行 word-break:break-all; */

	/* 溢出后显示滚动条 */

	overflow:auto;

	background-color:Blue;

	width:200px;

	float:left;

}

#body #nav ul

{

	padding-top:100px;

}

#body #nav li

{

	list-style-type:none;

	height:30px;

	padding-left:30px;

}

#body #content

{

	background-color:Green;

}

自学_CSS<二>的更多相关文章

linux自学（二）之centos7镜像安装
上一篇:linux自学(一)之vmware虚拟机安装虚拟机安装完成之后,就可以安装centos镜像了 centos官网:https://www.centos.org/ centos7镜像由于我的电 ...
Java自学-数组二维数组
Java 如何使用二维数组这是一个一维数组, 里面的每一个元素,都是一个基本类型int int a[] =new int[]{1,2,3,4,5}; 这是一个二维数组,里面的每一个元素,都是一个一维 ...
JDK源码阅读-------自学笔记(二十四)(java.util.LinkedList 再探自定义讲解)
一.实现get方法 1.一般思维实现思路 1).将对象的值放入一个中间变量中. 2).遍历索引值,将中间量的下一个元素赋值给中间量. 3).返回中间量中的元素值. 4).示意图 get(2),传入角标 ...
自学Python二 Python中的屠龙刀（续）
函数秉承着一切皆对象的理念,函数作为对象,可以为其赋值新的对象名,也可以作为参数传递给其他函数! 正常的诸如空函数,默认参数等等我们就不提了,在这里着重提一下默认参数里面的坑和lambda函数. 当 ...
python自学笔记二
:#进入循环重输文0件名 pass else:#退出循环,等待创建 break fobj = open(fname,'a')#打开或创建文件 #接下来写入文件 all = [] print('ente ...
webpack4 自学笔记二（typescript的配置）
全部的代码及笔记都可以在我的github上查看, 唤醒star: https://github.com/Jasonwang911/webpackStudyInit/tree/master/typesc ...
python自学笔记(二)
通过前文介绍,大体上可以用学过的知识做一些东西了. 这里简单介绍下python参数解析argparse命令. 使用argparse需要引用 import argparse 然后调用 parser = ...
mybatis自学历程(二)
传递多个参数 1.在mybatis.xml下<mappers>下使用<package> <mappers> <package name="com.m ...
【C++初学者自学笔记二】函数重载（模块一）
1.概念:同意作用域的一组参数列表不同,函数名相同的函数,这组函数叫函数重载(C语言是不能定义相同名称的函数,但是C++可以允许定义). 2作用:重载函数通常来命名一组功能相似的函数,这样做减少了函数 ...

随机推荐

python - 操作excel表格
说明:由于公司oa暂缺,人事妹子在做考勤的时候,需要通过几个excel表格去交叉比对员工是否有旷工或迟到,工作量大而且容易出错. 这时候it屌丝的机会来啦,花了一天时间给妹子撸了一个自动化脚本. 1. ...
abp去掉AbpUser中的Name,Surname，去掉姓和名分离
abp是国外的框架,默认的框架中的AbpUser表中的Name和Surname是分开的,这不符合国情:可以先去掉 1. 在User类中重写Name和Surname,并设置为私有 2. 在DbConte ...
PHP中RBAC权限管理
1.RBAC概念和原理 RBAC:全称叫做Role-Based Access Control,中文翻译叫做基于角色的访问控制.其主要的作用是实现项目的权限控制. ...
MyBatis框架之第二篇
1.高级参数映射和返回值映射(重点) a)Pojo包装pojo的参数映射 b)当结果集列名与pojo属性名不一致的返回值映射 2.动态sql(重点) 3.关联查询结果(重点) a)一对一关联结果 b) ...
nginx——keepalived
nginx--keepalived 1.keepalived高可用基本概述什么是高可用一般是指2台机器启动着完全相同的业务系统,当有一台机器down机了,另外一台服务器就能快速的接管,对于访问的用 ...
python升级带来的yum异常(解决错误File "/usr/bin/yum", line 30 except KeyboardInterrupt, e:)
解决错误File "/usr/bin/yum", line 30 except KeyboardInterrupt, e: 错误: 原因: 这是因为yum采用python作为命令解 ...
PM8909 linear charger硬件概述
电池充电是由qpnp-vm-bus.c(电池驱动BMS)和qpnp-linear-charger.c(线性充电器)组成: SMMB charger:Switch-ModeBattery Charger ...
coredump配置、产生、分析以及分析示例
关键词:coredump.core_pattern.coredump_filter等等. 应用程序在运行过程中由于各种异常或者bug导致退出,在满足一定条件下产生一个core文件. 通常core文件包 ...
《数据挖掘导论》实验课——实验一、数据处理之Numpy
实验一.数据处理之Numpy 一.实验目的 1. 了解numpy库的基本功能 2. 掌握Numpy库的对数组的操作与运算二.实验工具: 1. Anaconda 2. Numpy 三.Numpy简介 ...
python第二次作业-titanic数据库练习
一.读入titanic.xlsx文件,按照教材示例步骤,完成数据清洗. titanic数据集包含11个特征,分别是: Survived:0代表死亡,1代表存活Pclass:乘客所持票类,有三种值(1, ...

自学_CSS<二>

CSS