CSS

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

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

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

  • 页面嵌入：在head中加入

  1. <style type="text/css">
  2. input{border-color:Yellow;color:Red;}
  3. </style>

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

  1. <style type="text/css">
  2. 	P
  3. 	{
  4. 	color:Red;
  5. 	font-weight:bold;
  6. 	}
  7. </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上
  • 应用：图片：不显示边框，见备注

    图片：不显示边框
  1. IMG {
  2. 	border:0px;BORDER-BOTTOM: medium none;
  3. 	BORDER-LEFT: medium none;
  4. 	BORDER-TOP: medium none;
  5. 	BORDER-RIGHT: medium none
  6. }

例子 外部引用

  1. *
  2. {
  3. 	/* 所有的元素 */
  4. 	margin:0;
  5. 	padding:0;
  6. 	color:Red;
  7. }
  8. body
  9. {
  10. 	background:red url(/images/back_image.GIF);
  11. }
  13. span
  14. {
  15. 	/* block 块
  16. 	display:block;*/
  17. 	cursor:pointer;
  18. 	color:Blue;
  19. 	text-decoration:underline;
  20. }
  21. input
  22. {
  23. 	color:Green;
  24. }
  26. li
  27. {
  29. 	/* 去掉ul前面的黑点 */
  30. 	list-style-type:none;
  31. }

样式选择器

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

  • 标签选择器 input{border-color:Yellow;color:Red;}，对于指定的标签采用统一的样式

  • class选择器，以定义一个命名的样式，然后在用到它的时候设定元素的class属性为样式的名称，还可以同时设定多个class，名称之间加空格

  1. .d1
  2. {
  3. 	color:Red;
  4. 	width:100px;
  5. }
  6. .d2
  7. {
  8. 	color:Blue;
  9. 	width:200px;
  10. }
  11. .d3
  12. {
  13. 	color:Green;
  14. 	width:300px;
  15. }
  16. <div class="d1">
  17. 	123123123
  18. </div>
  19. <div class="d2">
  20. 	abc
  21. </div>
  22. <div class="d3">
  23. 	啊打发
  24. </div>

样式名称开头加“.”

  1. .warning{background:Yellow;}
  2. .highlight{font-size:xx-large;cursor:help;}
  3. <table>
  4. <tr>
  5. <td class="highlight">aaa</td>
  6. <td class="warning">bb</td>
  7. <td class="highlight warning">ccc</td>
  8. </tr>
  9. </table>
  • 标签+类选择器:通过指定标签来确定不同的类适用范围
  1. label.name
  2. {
  3. 	background-color:Gray;
  4. }
  5. input.name
  6. {
  7. 	color:Blue;
  8. }
  9. <label for="name" class="name">用户名：</label>
  10. <input class="name" id="name" type="text" value="" />
  • id选择器：与类选择器不同的地方就是.改成了#。
  1. #wrap
  2. {
  3. 	border:solid 1px blue;
  4. 	width:300px;
  5. 	height:300px;
  6. }
  7. <div id="wrap">
  8. main
  9. </div>
  • 包含选择器：设置div中strong标签的格式，div中所有strong
  1. div  strong
  2. {
  3. 	color:Red;
  4. }
  5. <strong>测试</strong>
  6. <div>
  7. 	<strong>这是左边栏</strong>
  8. 	left
  9. </div>
  • 后代选择器：直接属于div的strong才会属于这个样式。
  1. div strong
  2. {
  3. 	color:Red;
  4. }
  5. <div>
  6. 	<strong>这是左边栏</strong>
  7. 	left
  8. </div>
  • 组合选择器 ：多个标签一个样式，组合选择器可以使用类选择器.h3,.p,.span {}
  1. h3,p,span
  2. {
  3. 	color:Yellow;
  4. }
  5. <h3>标题3</h3>
  6. <p>这是段落</p>
  7. <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}
  1. a:visited
  2. {
  3. 	color:Gray;
  4. }
  5. a:link
  6. {
  7. 	color:Red;
  9. }
  10. a:hover
  11. {
  12. 	color:Black;
  13. 	font-style:italic;
  14. }
  15. a:active
  16. {
  17. 	color:Yellow;
  18. }
  19. <a href="http://www.itcast.cn">传智播客</a>
  20. <a href="http://www.csdn.com">csdn</a>
  21. <a href="http://www.cnbeta.com">cnbeta</a>
  22. <a href="http://www.123.com">123</a>

传智博客视频_布局

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

  • 表格布局：表格套表格 ，代码多，table显示很慢，一块块的显示就比较麻烦，显示圆角就比较麻烦
  • 框架布局：多个页面来显示：
    • Frameset 框架页里不能有body
  1. <head>
  2. <title></title>
  3. </head>
  5. <frameset rows="30%,*">
  6.   <frame name="top" src="top.htm" noresize="noresize"/>
  7.   <frameset cols="20%,*">
  8.     <frame name="left" src="left.htm" noresize="noresize"/>
  9.     <frame name="main" src="main.htm" noresize="noresize"/>
  10.   </frameset>
  11. </frameset>
  13. left.html
  14. <body>
  15. <ul>
  16. <li><a href="1-注册页面.htm" target="main">注册</a></li>
  17. <li><a href="5-选择器.htm" target="if">登陆</a></li>
  18. </ul>
  19. </body>
    • iframe 嵌入页面
  1. <iframe src="iframe.htm" name="0" width="0" height="0"></iframe>
  2. <body>
  3. adsfasdf
  4. asdf
  5. <iframe src="1-注册页面.htm" width="0" height="0"></iframe>
  6. adsf
  7. </body>

main.html

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

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

  • div+css布局：

  • 网页布局就是“这块内容显示在左边，那两块内容并排显示，那块内容漂浮在页面上”。

  • 不要使用<table>进行布局，因为：table可能会在所有tr、td加载完成以后才显示，所以加载完成之前界面是一片空白；用table布局会将布局方式写在html中，违反了“语义性”原则；用table会影响搜索引擎的抓取，不利于SEO。因此Table用来表达真是表格状数据的东西，布局用Div(层)+Css来做,Div用来圈定元素，CSS用来定义元素的位置。

  • Div+CSS就是将要布局的内容用<div>切成块，然后使用css描述每个块的大小、位置等。

  • 布局最重要的一个属性就是float，

  1. <html xmlns="http://www.w3.org/1999/xhtml" >
  2. <head>
  3. <title></title>
  4. <link href="css/style.css" rel="stylesheet" type="text/css" />
  5. </head>
  6. <body>
  7. <div id="wrap">
  8. <div id="head">
  9. <div id="logo">
  10. <img src="images/back_image.GIF" width="100px" height="50px" /></div>
  11. <div id="menu">
  12. <ul>
  13. <li>首页</li>
  14. <li>播客</li>
  15. <li>相册</li>
  16. <li>关于</li>
  17. </ul>
  18. </div>
  19. </div>
  20. <div id="body">
  21. <div id="nav">
  22. <ul>
  23. <li>好好学习</li>
  24. <li>天天向上</li>
  25. <li>不要睡觉</li>
  26. </ul>
  28. </div>
  29. <div id="content">内容</div>
  30. </div>
  31. <div id="footer">版权</div>
  32. </div>
  33. </body>
  34. </html>
  36. *
  37. {
  38. 	margin:0px;
  39. 	padding:0px;
  40. }
  41. body
  42. {
  43. 	background-color:Gray;
  45. }
  46. #wrap
  47. {
  48. 	width:98%;
  49. 	height:500px;
  50. 	margin:0px auto;
  51. }
  53. #head
  54. {
  55. 	height:150px;
  56. 	background-color:Red;
  57. }
  58. #head #menu
  59. {
  60. 	margin:80px auto 0px auto;
  61. 	padding-left:200px;
  62. }
  63. #head #menu ul
  64. {
  65. 	width:400px;
  66. }
  67. #head #menu li
  68. {
  69. 	float:left;
  70. 	width:100px;
  71. 	list-style-type:none;
  72. }
  73. #body
  74. {
  75. 	height:800px;
  76. 	background-color:White;
  77. }
  78. #body #nav
  79. {
  80. 	/* 强制英文换行 word-break:break-all; */
  81. 	/* 溢出后显示滚动条 */
  82. 	overflow:auto;
  83. 	background-color:Blue;
  84. 	width:200px;
  85. 	float:left;
  86. }
  87. #body #nav ul
  88. {
  89. 	padding-top:100px;
  90. }
  91. #body #nav li
  92. {
  93. 	list-style-type:none;
  94. 	height:30px;
  95. 	padding-left:30px;
  97. }
  98. #body #content
  99. {
  100. 	background-color:Green;
  101. }

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

  1. linux自学（二）之centos7镜像安装

    上一篇:linux自学(一)之vmware虚拟机安装 虚拟机安装完成之后,就可以安装centos镜像了 centos官网:https://www.centos.org/ centos7镜像 由于我的电 ...

  2. Java自学-数组 二维数组

    Java 如何使用二维数组 这是一个一维数组, 里面的每一个元素,都是一个基本类型int int a[] =new int[]{1,2,3,4,5}; 这是一个二维数组,里面的每一个元素,都是一个一维 ...

  3. JDK源码阅读-------自学笔记(二十四)(java.util.LinkedList 再探 自定义讲解)

    一.实现get方法 1.一般思维实现思路 1).将对象的值放入一个中间变量中. 2).遍历索引值,将中间量的下一个元素赋值给中间量. 3).返回中间量中的元素值. 4).示意图 get(2),传入角标 ...

  4. 自学Python二 Python中的屠龙刀（续）

    函数 秉承着一切皆对象的理念,函数作为对象,可以为其赋值新的对象名,也可以作为参数传递给其他函数! 正常的诸如空函数,默认参数等等我们就不提了,在这里着重提一下默认参数里面的坑和lambda函数. 当 ...

  5. python自学笔记二

    :#进入循环重输文0件名 pass else:#退出循环,等待创建 break fobj = open(fname,'a')#打开或创建文件 #接下来写入文件 all = [] print('ente ...

  6. webpack4 自学笔记二（typescript的配置）

    全部的代码及笔记都可以在我的github上查看, 唤醒star: https://github.com/Jasonwang911/webpackStudyInit/tree/master/typesc ...

  7. python自学笔记(二)

    通过前文介绍,大体上可以用学过的知识做一些东西了. 这里简单介绍下python参数解析argparse命令. 使用argparse需要引用  import argparse 然后调用 parser = ...

  8. mybatis自学历程(二)

    传递多个参数 1.在mybatis.xml下<mappers>下使用<package> <mappers> <package name="com.m ...

  9. 【C++初学者自学笔记二】函数重载（模块一）

    1.概念:同意作用域的一组参数列表不同,函数名相同的函数,这组函数叫函数重载(C语言是不能定义相同名称的函数,但是C++可以允许定义). 2作用:重载函数通常来命名一组功能相似的函数,这样做减少了函数 ...

随机推荐

  1. [WPF 自定义控件]让Form在加载后自动获得焦点

    1. 需求 加载后让第一个输入框或者焦点是个很基本的功能,典型的如"登录"对话框.一般来说"登录"对话框加载后"用户名"应该马上获得焦点,用 ...

  2. ASP.NET是什么？

    ASP.NET简介 简单来说,ASP.NET 是一个使用 HTML.CSS.JavaScript 和服务器脚本创建网页和网站的开发框架. 微软在2001年开发的第一个版本的ASP.NET,是一种建立在 ...

  3. Java每日一面(Part1:计算机网络)[19/10/14]

    作者:故事我忘了￠个人微信公众号:程序猿的月光宝盒 1.1 说一说TCP的四次挥手 ​ "挥手",即终止TCP连接,断开一个TCP连接池. ​ 需要客户端和服务端总共发出四个包,以 ...

  4. 关于javascript中变量及函数的提升

    javascript中变量以及函数的提升,在我们平时的项目中其实还是挺常用的,尤其是大型项目中,不知不觉就会顺手添加一些变量,而有时候自己的不小心就会酿成一些不必要错误,趁有时间整理一下自己对于js中 ...

  5. 利用QQ获取ip

    首先启动任务管理器,选择性能选型,点击打开资源管理器  点击网络,找到qq.exe 点击下面的TCP链接  最好让你的qq好友发一个离线文件,在接收的时候注意远程连接,即使您所要的你好友的ip地址 

  6. 前端三剑客之-html

    web服务本质 import socket def main(): sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM) sock.bind ...

  7. Delphi 任务栏中不显示窗口

    目的: 1. 窗口不在任务栏显示. 2. 窗口不显示在Alt+Tab的切换列表中. 3. 在任务管理器的应用程序列表中不显示. 示例: type TAppWndBrowser = class( TFo ...

  8. 【tf.keras】tf.keras使用tensorflow中定义的optimizer

    Update:2019/09/21 使用 tf.keras 时,请使用 tf.keras.optimizers 里面的优化器,不要使用 tf.train 里面的优化器,不然学习率衰减会出现问题. 使用 ...

  9. jt格式文件读取，osg显示插件更新

    osgdb_jt 最近还是更新了一下 osgdb_jt 插件.解码jt格式核心库jt_toolkit,通过静态链接到Plugin jt产生osgdb_jt插件,使得osg可以可视化jt格式文件. 用法 ...

  10. The Preliminary Contest for ICPC Asia Nanjing 2019

    传送门 A. The beautiful values of the palace 题意: 给出一个\(n*n\)的矩阵,并满足\(n\)为奇数,矩阵中的数从右上角开始往下,类似于蛇形填数那样来填充. ...