自学_CSS<二>
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作用:重载函数通常来命名一组功能相似的函数,这样做减少了函数 ...
随机推荐
- go语言之面向对象
Go 语言结构体 Go 语言中数组可以存储同一类型的数据,但在结构体中我们可以为不同项定义不同的数据类型. 结构体是由一系列具有相同类型或不同类型的数据构成的数据集合. 结构体表示一项记录,比如保存图 ...
- 【Java基础】正则表达式
目录 正则表达式 什么正则表达式 普通字符 预定义字符 特殊字符 数量限定字符 定位字符 选择符和分组 反向引用 预搜索 运算符的优先级 常用正则 附录 正则表达式 本文的大部分内容转载自正则表达式从 ...
- 高并发 Nginx+Lua OpenResty系列（11）——流量复制/AB测试/协程
流量复制 在实际开发中经常涉及到项目的升级,而该升级不能简单的上线就完事了,需要验证该升级是否兼容老的上线,因此可能需要并行运行两个项目一段时间进行数据比对和校验,待没问题后再进行上线.这其实就需要进 ...
- [算法]PriorityQueue的应用
1. 数据流中的第K大元素 题目 设计一个找到数据流中第K大元素的类(class).注意是排序后的第K大元素,不是第K个不同的元素. 你的 KthLargest 类需要一个同时接收整数 k 和整数数组 ...
- 网络协议 15 - P2P 协议
大家说起种子,应该都知道是用来下载资源的.那么资源下载都有哪些方式?种子下载又有什么优势呢? 下载电影的两种方式 第一种是通过 HTTP 进行下载.这种方式,有过经历的人应该体会到,当下载文件 ...
- Thymeleaf常用语法：模板片断
系统中的很多页面有很多公共内容,例如菜单.页脚等,这些公共内容可以提取放在一个称为“模板片断”的公共页面里面,其它页面可以引用这个 “模板片断”内容. 一.模板片断的定义 可以是html标签,也可以使 ...
- 微信小程序API交互反馈,wx.showToast显示消息提示框
导读:wx.showToast(OBJECT) 显示消息提示框. OBJECT参数说明: 参数 类型 必填 说明 最低版本 title String 是 提示的内容 icon String 否 图标, ...
- 工作日志，go get -v -x github.com/pebbe/zmq4 失败问题
工作日志,go get -v -x github.com/pebbe/zmq4 失败问题 笔者因为工作需要使用ZeroMQ,但是在执行go get -v -x github.com/pebbe/zmq ...
- MySql 库/表级操作 及 数据类型
数据库分类 关系型数据库(SQL):存储方式固定,安全 非关系型数据库(NoSQL):存储方式比较灵活,存储数据的效率比较高,不太安全 MySQL是一种关系型数据库管理系统(采用关系模型来组织管理数据 ...
- The Preliminary Contest for ICPC Asia Nanjing 2019
传送门 A. The beautiful values of the palace 题意: 给出一个\(n*n\)的矩阵,并满足\(n\)为奇数,矩阵中的数从右上角开始往下,类似于蛇形填数那样来填充. ...