黑马程序员-自学笔记-CSS基础
CSS基础
---------------------- ASP.Net+Android+IOS开发、.Net培训、期待与您交流！ ----------------------
1、样式表、CSS
1）CSS（层叠样式表，CascadingStyle Sheet）是用来美化页面用的，可以对页面元素进行更精细的设置，样式主要描述元素的字体颜色、背景颜色、边框等。
2）使用CSS的好处：
样式表能实现内容与样式的分离，方便团队开发
方便统一定义格式,修改也方便.
外观美化 布局、定位
HTML标签的外观样式比较单一
页面色彩不生动
样式修改不方便
样式表的作用：为网页设置外观，相当于华丽的衣服。
2、常见CSS样式
1）Css样式的属性的键值对之间用“：”（冒号）隔开，而不同的属性之间用”;”（分号）隔开。
2）css计量单位：css中表示宽度、距离时有多种计量单位：px（像素）、30%（百分比）、em（相对单位）等。width:20px。
3）background-color:Red;背景颜色；
4）color：文本颜色
5）border-style:solid;边框风格，实线（默认是没有），还有dotted(点)等值；
6）border-color：边框颜色；
7）border-width：边框宽度(默认是0)。
style="border-color:Red;border-width:1px;border-style:dotted;"
8）display：元素是否显示，可选值none（不显示）、block （显示为块级元素，此元素前后会带有换行符。）、inline（显示为内联元素，元素前后没有换行符 ,为div增加display:inline;样式后与span显示效果一致。注意：【
<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml"> 】）等。
9）cursor，鼠标在元素上时显示的光标图标，可选值：cursor（默认光标）、pointer（超链接上的手）、text（输入Bean）、wait（忙沙漏）、help（帮助）等。还可以通过cursor:url(dinosau2.ani)使用ani、cur格式的自定义光标图片。
10）LI不显示圆点：LIST-STYLE-TYPE:none;一般设在li或者ul上
11）margin(与表格的cellspacing属性类似)、padding(与表格的cellpadding类似。)
3、使用CSS的三种方式
CSS主要有元素内联、页面嵌入和外部引用三种使用方式。CSS是描述元素的皮肤！
1）元素内联(行内样式表)，直接将样式写入元素的style属性中，<inputtype="text" readonly="readonly"style="background-color: #FF00FF" />，适用于样式没有可复用性的场合。
2）页面嵌入（内嵌样式表）：在head中加入
<styletype="text/css">
input{border-color:Yellow;color:Red;}
</style>
表示页面中所有input都是采用指定的样式。适合于样式复用，减小页面体积
3）外部引用（外部样式表），将css内容写入css后缀的文件
textarea{background:yellow}
然后在页面中引用，在head中加入
<link type="text/css" rel=“stylesheet"href="s1.css" />
适合于多个页面共享css。
4）推荐把尽可能多的样式写到单独的css文件中，这样可以复用，美工人员和开发人员很好的分工。
只有页面特有的样式才写到<style>中
只有元素特有的样式才写到元素的style属性中。
如果不同级别的样式有冲突，详细级别、子元素的会覆盖更高级别、父元素的。就近原则。
CSS中的注释： /* */
4、样式选择器
1）对于非元素内联的样式需要定义样式选择器，通俗的说就是这个样式适合于哪些元素，三种：标签选择器、class选择器和id选择器。
2）标签选择器input{border-color:Yellow;color:Red;}，对于指定的标签采用统一的样式
3）class选择器，以定义一个命名的样式，然后在用到它的时候设定元素的class属性为样式的名称，还可以同时设定多个class，名称之间加空格
样式名称开头加“.”
.warning{background:Yellow;}
.highlight{font-size:xx-large;cursor:help;}
<table><tr><tdclass="highlight">aaa</td><tdclass="warning">bb</td><td class="highlightwarning">ccc</td></tr></table>
4）同一个标签可以应用多个类选择器（空格隔开）。如果样式表中的定义有重复，则以最后一个定义为准。
5）选择器的优先级：Style > Id选择器 > 类选择器 > 标签选择器
5、标签+class选择器
class选择器也可以针对不同的标签，实现同样的样式名对于不同的标签有不同的样式，只要在样式名前加标签名即可。
input.accountno{text-align:right;color:Red;}
label.accountno{font-style:italic;}
<input class="accountno" type="text"value="11111111111" />
<labelclass="accountno">333333333333333333</label>
6、id选择器
1）为指定id的元素设定样式，id前加#
#username
{
font-size:10px;
}
<input id="username" type="text" value="aaaaaaaaaaaa"/>
2）style、class可以同时组合使用
<input id="username" class="accountno"style="font-size:40px;color:red" type="text"value="aaaaaaaaaaaa“ />
7、更多选择器
1）包含选择器：
P strong{ background-color:Yellow}
表示P标签内的strong标签内的内容使用的样式
<strong>fadsfasdfads</strong>
<p><strong>adfasfd</strong></p>
2）组合选择器，同时为多个标签设定一个样式
H1,H2,input{background-color:Green}
<h1>nihao</h1>
<input type="text" value="test" />
8、伪选择器
1）伪选择器：为标签的不同状态设定不同的样式：
A:visited：超链接点击过的样式；A:active：选中超链接时的样式；A:link：超链接未被访问时的状态；A:hover：鼠标移到超链接时的状态。
A:visited {TEXT-DECORATION: none}
A:active {TEXT-DECORATION: none}
A:link {TEXT-DECORATION: none}
A:hover {TEXT-DECORATION: underline}
说明：TEXT-DECORATION:none表示超链接不显示下划线。
2）不是所有的元素都支持伪选择器。
9、细边框表格
1）table的border-collapse样式。
separate:边框独立。
collapse：相邻边缘被合并。如：
<html>
<head>
<title> new document</title>
<styletype="text/css">
td
{
border:1px solidblue;
}
table
{
/*border-collapse:collapse;*/
}
</style>
</head>
<body>
<tablecellpadding="0" cellspacing="0">
<tr><td>one</td><td>two</td></tr>
<tr><td>three</td><td>four</td></tr>
</table>
</body>
</html>
2）使用ul和li制作横向和纵向菜单(*)
布局最重要的一个属性就是float
ul li { float:left; list-style-type:none; margin-left:30px; }
动态二级菜单，如：
<html xmlns="http://www.w3.org/1999/xhtml"lang="zh-CN">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>css菜单演示</title>
<styletype="text/css">
<!--
*{margin:0;padding:0;border:0;}/*要定义margin属性为0px;否则下拉会居中*/
body {font-family: arial, 宋体, serif; font-size:12px;}
/*下列菜单样式*/
#menu {width:778px; height:22px;margin:auto; background:#FF2700}
#nav{line-height: 22px;list-style: none; background:#666;}
#nav a {display:block; width: 80px; text-align:center;}
#nav a:link{color:#fff; text-decoration:none;}
#nav a:visited{color:#fff;text-decoration:none;}
#nav a:hover{color:#FFF;text-decoration:none;}
#nav li {float:left; width: 80px; background:#FF2700;}/*首层背景色*/
#nav lia:hover{background:#FF2700;}/*经过背景色*/
#nav li ul{line-height: 22px; list-style-type: none;text-align:left;left: -999em; width:100px; position: absolute;}
#nav li ulli{float: left; width: 100px;background:#ECECEC; border:1px solid #FF2700;border-top:none;border-right:none}/*下列列表层背景色,属性*/
#nav li ula{display: block; width: 84px;text-align:left;padding-left:16px;}
#nav li ul a:link{color:#666; text-decoration:none;}
#nav li ula:visited {color:#666;text-decoration:none;}
#nav li ula:hover {color:#F3F3F3;text-decoration:none;font-weight:normal;}/*下列列表层经过属性*/
#nav li:hover ul{left: auto;}
#nav li.sfhoverul {left: auto;}
/*下列菜单结束*/
-->
</style>
<scripttype=text/javascript><!--//--><![CDATA[//><!--
function menuFix() {
var sfEls =document.getElementById("nav").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].οnmοuseοver=function() {
this.className+=(this.className.length>0?" ": "") + "sfhover";
}
sfEls[i].onMouseDown=function() {
this.className+=(this.className.length>0?" ": "") + "sfhover";
}
sfEls[i].onMouseUp=function() {
this.className+=(this.className.length>0?" ": "") + "sfhover";
}
sfEls[i].οnmοuseοut=function() {
this.className=this.className.replace(newRegExp("( ?|^)sfhover\\b"),
"");
}
}
}
window.οnlοad=menuFix;
//--><!]]></script>
</head>
<body>
<!--菜单-->
<divid="menu">
<ulid="nav">
<li><ahref="#">项目一</a>
<ul>
<li><ahref="#" background="blue">子项1</a></li>
<li><ahref="#">子项2</a></li>
<li><ahref="#">子项3</a></li>
</ul>
</li>
<li><ahref="#">项目二</a>
<ul>
<li><ahref="#" background="blue">子项1</a></li>
<li><ahref="#">子项2</a></li>
<li><ahref="#">子项3</a></li>
</ul>
</li>
<li><ahref="#">项目三</a>
<ul>
<li><ahref="#" background="blue">子项1</a></li>
<li><ahref="#">子项2</a></li>
<li><ahref="#">子项3</a></li>
</ul>
</li>
<li><ahref="#">项目四</a>
<ul>
<li><ahref="#" background="blue">子项1</a></li>
<li><ahref="#">子项2</a></li>
<li><ahref="#">子项3</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
10、Div+CSS布局(*)
1）网页布局就是“这块内容显示在左边，那两块内容并排显示，那块内容漂浮在页面上”。
2）不要使用<table>进行布局，因为：table可能会在所有tr、td加载完成以后才显示，所以加载完成之前界面是一片空白；用table布局会将布局方式写在html中，违反了“语义性”原则；用table会影响搜索引擎的抓取，不利于SEO。因此Table用来表达真是表格状数据的东西，布局用Div(层)+Css来做,Div用来圈定元素，CSS用来定义元素的位置。
3）Div+CSS就是将要布局的内容用<div>切成块，然后使用css描述每个块的大小、位置等。
4）布局最重要的一个属性就是float。
float，浮动。什么是浮动？
布局模式：
1.文档流
2.脱离文档流
2.1 float（浮动）
2.2 position(绝对定位)
<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title> New Document </title>
<style type="text/css">
html,body
{
height:100%;
}
</style>
</head>
<body style="height:100%">
<divstyle="float:left;width:100px;height:100px; border:1px solidblue;">
</div>
<divstyle="float:right;width:100px;height:100px; border:1px solidblue;">
</div>
<div style="margin:0pxauto;;width:100px;height:100%; border:1px solid blue;">
</div>
</body>
</html>
案例：顶部菜单
<style type="text/css">
#nav ul
{
list-style-type:none;
}
#nav ul li
{
float:left;
margin:010px;
}
.menuSeparator{width:1px;height:18px;background:Red}
</style>
<divid="nav">
<ul>
<li><ahref="http://www.itcast.cn">传智播客</a></li>
<liclass="menuSeparator"></li>
<li><a href="http://www.baidu.com">百度</a></li>
<liclass="menuSeparator"></li>
<li><ahref="http://www.google.com">谷歌</a></li>
</ul>
</div>
li中的项横排显示是float:left;的作用，margin:010px;的作用是不让各个项之间紧挨着。项之间的分割竖线是用一个宽度为1，高度为18的红色背景的li做的。
11、文档流
文档流：将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素。
position 有五个值：static、relative、absolute、fixed、inherit。
static
是默认值。就是按正常的布局流从上到下从左到右布局，平常我们做网页时，没有指定position，也就表示使用static。
relative
没有脱离布局流，此时可以使用 top、right、bottom、left 属性。
top 和 bottom 共存时，使用 top 值，忽略 bottom 值；
left 和 right 共存时，使用 left值，忽略 right 值；
relative 是相对位置，指相对于元素的 position 为 static 时的位置：
top 相对于 static 下移多少像素（若 top 是负值，则上移）。
right 相对于 static 左移多少像素（若 right是负值，则右移）。
bottom 相对于 static 上移多少像素（若 bottom是负值，则下移）。
left 相对于 static 右移多少像素（若 left是负值，则左移）。
使用 relative 之后：
原来的空间不会被其他元素挤占。
元素在最终位置时也不会挤占其他元素的空间，它浮动到其它元素的上方。
absolute
脱离布局流，此时可以使用 top、right、bottom、left，但这些属性不再是相对于 static时的位置，而是相对于 containingblock 的，相对于其边框内边缘的，而不是其padding 内边缘。
使用 absolute 之后：
原来的空间会被其他元素挤占。
元素在最终位置时也不会挤占其他元素的空间，它浮动到其它元素的上方。
fixed
它的模式与 absolute 相同，不过无论怎么拖动滚动条，它始终固定在屏幕的指定位置。在IE6 中不支持这个属性；在IE7 中支持这个属性但需要指明DOCTYPE；Firefox 等浏览器支持这个属性。
top、right、bottom、left 属性指相对于视口的。
inherit
继续父元素的 position 值。
名称解释
视口－通过解析文档，连续媒体（比如屏幕就是连续媒体，而打印机则是基于页的媒体）给用户产生一个视口（一个窗口或其它在屏幕上显示的区域）。
12、框架简介
1）frameset 框架页里不能有body.
<frameset rows="30%,65%,*" cols=“50%,50%”>
<frame src="top.htm"noresize/>
<framesetcols="20%,80%">
<framesrc="left.htm" noresize/>
<framesrc="main.htm" noresize/>
</frameset>
<noframes>
<body>当浏览器不支持框架时，显示这个body中内容</body>
</noframes>
</frameset>
测试target属性的其他取值：top、parent、框架名。
2）Iframe(不分割当前页面，就可以嵌入其他页面。)
<iframe src="iframe.htm"name="0" width="0" height="0"></iframe>
3）rows:表示把页面按照行，分割成几部分
cols:表示将页面按列分割成几部分。
frameset：是将一个页面分割成多个子页面。
iframe:是在一个页面中（在body中）的某个 部分。嵌入一个新页面。
13、其他及盒子模型
1）当使用表格布局的时候，不要建一个非常复杂的表格，而是使用表格嵌套表格，这样虽然代码会多点，但思路清晰，便于修改。
2）!important提高优先级。（color:red!important; color:green;最后显示是red;）
3）z-index
4）@importurl(xx.css);
在一个css中，添加对其他css文件的引用。
5）/CSS中的注释：/* */
6）盒子模型。
---------------------- ASP.Net+Android+IOS开发、.Net培训、期待与您交流！ ----------------------
黑马程序员-自学笔记-CSS基础相关推荐
- 黑马程序员-自学笔记-面向过程编程（骑士飞行棋）
面向过程编程应用-骑士飞行棋 ---------------------- ASP.Net+Android+IOS开发..Net培训.期待与您交流! ---------------------- 1. ...
- 黑马程序员最新版JavaWeb基础教程-学习笔记
da@黑马程序员最新版JavaWeb基础教程-学习笔记 day06-HTML&CSS HTML HTML(HyperTest Markup Language):超文本标记语言 是一门语言,所有 ...
- 黑马程序员：从零基础到精通的前端学习路线
黑马程序员:从零基础到精通的前端学习路线 随着互联网的深入发展,前端开发工程师一跃成为市场上非常抢手的人才.很多同学,包括以前做UI的.Java的.或者对于IT完全零基础的同学都想学习前端.下图是网上 ...
- [黑马程序员C++笔记]P72-P83通讯录管理系统
目录 系统需求 1.菜单功能 2.退出功能 3.添加联系人 (1)设计联系人结构体 (2) 设计通讯录结构体 (3)main函数中创建通讯录 (4)封装添加联系人函数 (5 ...
- [黑马程序员C++笔记]P72-P83通讯录管理系统总体概览
系统需求 通讯录是一个可以记录亲人.好友信息的工具. 本教程主要利用C++来实现一个通讯录管理系统 系统中需要实现的功能如下: 添加联系人:向通讯录中添加新人,信息包括(姓名.性别.年龄.联系电话.家 ...
- 黑马程序员最新版JavaWeb基础教程最后的案例学习记录
黑马程序员最新版JavaWeb基础教程最后的案例学习记录这里写自定义目录标题 调试中我遇到的问题 调试中我遇到的问题 若db1报错: 则 改成自己的数据库名称 web.xml报错:则用这一段代码 &l ...
- 黑马程序员jvm笔记总集
黑马程序员jvm笔记(一)–程序计数器 虚拟机栈 堆 黑马程序员jvm笔记(二)–方法区 串池 直接内存 黑马程序员jvm笔记(三)–垃圾回收部分心得 黑马程序员jvm笔记(四)–字节码部分心得 黑马 ...
- 黑马程序员----0704期java基础班心得
------<a target="blank">Java培训.Android培训.iOS培训..Net培训</a>.期待与您交流! ------- 黑马程 ...
- SpringCloud学习笔记，课程源自黑马程序员，笔记持续更新中...
@SpringCloud+RabbitMQ+Docker+Redis+搜索+分布式: 学习内容 1.服务拆分-服务远程调用: 2.搭建eureka服务: 2.1.eureka服务注册-client 2 ...
最新文章
- R语言绘制堆叠条形图
- Bootstrap组件_导航条（默认样式的导航条，品牌）
- POJ - 1190 生日蛋糕(dfs+剪枝)
- 真的要做一辈子的程序员吗？来自10年程序员的心声
- python 实现语音转文字_python3实现语音转文字(语音识别)和文字转语音(语音合成)...
- datetime2 数据类型
- Angular Model
- 华为交换机接口允许vlan通过_VLAN工作原理之TRUNK：控制允许通过的VLAN（Allowed List）...
- 东西湖职业技术学校计算机专业怎么样,武汉东西湖职业技术学校怎么样
- sql server 读写txt文件
- 了解计算机的配置及价格行情,最新电脑配置清单及价格的详细介绍
- 优秀开源Web开发资源大集合
- 临近面试却还没准备好？大厂内部面试官权威的Android面试指导，带你弯道超车
- Spring Boot基于注解方式处理接口数据脱敏
- 一个朋友椰子 blog上的文章
- JavaScript-81.8-操作元素属性-JS在VS Code中添加图片
- easyExcel导入失败提示用户第几行有误并回滚数据
- Swift团队逼走创始人？本人回应表示团队“有毒”
- 未来ET大脑将如何打造可编程城市
- PHP 浮点数的加减乘除