CSS基础知识：1.CSS层叠样式表（Cascading Style Sheets）:解决内容与表现分离的问题。2. 层叠次序:（1）浏览器缺省设置；（2）外部样式表；（3）内部样式表（位于 <head> 标签内部）；（4）内联样式（在 HTML 元素内部）；即，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：<head> 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。3.CSS语法：CSS 规则由两个主...
一、CSS介绍CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。二、CSS语法1、CSS实例每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。2、CSS注释/*这是注释*/注释是代码之母。--摘自哪吒语录三、CSS的几种引入方式1、行内样式行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。<p s...
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明: 选择器{属性:属性值;}CSS 选择器选择器示例示例说明CSS版本.class.intro选择所有class="intro"的元素1#id#firstname选择所有id="firstname"的元素1**选择所有元素2elementp选择所有 元素1element,elementdiv,p选择所有 元素和 元素1element elementdiv p选择 元素内的所有 元素1element>elementdiv>p选择所有父级是 元素的 元素2element+elementdiv+p选择所有紧接着 ...
输入框默认值设置<!--单行与多行输入框默认值--><input value="xxx"/><textarea>123</textarea>下拉框默认值设置<!--select下拉框默认选择设置--><select><option>上海</option><option selected="selected">广州</option><option>台北</option></select>单选框默认值设置<!--单选框默认选择--> 男<input type="radio" name="g1"/> 女<input type="radio" name="g1" checked="checked"/>复选框默认值设置<!--复选框默认选择--><inp...
一、 css的引入方式1.头部引入 特点：优点：1.速度快，无服务器请求压力； 2.相对于外部引入单页代码量少。缺点：1.不易改版与维护； 2.代码较乱不易前后台沟通。2.标签内引入 特点：1.优先级最高； 2.冗余代码多，代码量大； 3.不利于维护。3.外部引人然后 特点：优点：1.一个css文件可以控制多个页面； 2.易改版、便于维护； 3.减少代码量、代码简洁规范易于分工协作； 4.有效利用缓存机制。缺点：1.相对单页有垃圾代码； 2.href...
制作自己的导航条。HTML头部元素：<base> 定义了页面链接标签的默认链接地址<style> 定义了HTML文档的样式文件<link> 定义了一个文档和外部资源之间的关系练习样式表：行内样式表内嵌样式表外部样式表分别练习定义三类选择器：HTML 选择器CLASS 类选择器ID 选择器<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>淘你喜欢</title><base href="https://www.taobao.com/"target="_blank"><link rel="styleshe...
CSS指层叠样式表（Cascading Style Sheets） 样式声明： 选择器和优先级：<!DOCTYPE html> <html> <head><script src="js/jquery.min.js" type="text/javascript"></script><title>Document</title><style type="text/css">/*选择器的优先级： 属性选择器 > id选择器 > 类选择器 > 标签选择器*//*标签选择器*/img{border: 10px solid red;width: 200px;}/*类选择器*/.demo{width: 500px;}/*id选择器*/#test{height: 200px;width: ...
元素选择器最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器：p { text-indent:10px; color:blue; } 什么情况下使用元素选择器，一般我们这样认为： 如果你想要让页面中所有的指定元素都有这个CSS效果，可以使用元素选择器。 有这样一段html代码：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><link rel="stylesheet" type="text/css" href="index.css"><title></title></head><bo...
1、原理： 2、快速入门案例js中的事件主要分为4种：案例：监听鼠标点击事件，并能够显示鼠标点击的位置x,y<script language="javascript" type="text/javascript">function test1(e){window.alert(‘x=‘+e.clientX+‘y=‘+e.clientY);}function test2(e){window.alert(‘x=‘+e.clientX+‘y=‘+e.clientY);}function test3(){window.alert(new Date());} </script> <body onmousedown="test1(event)" onmousemove="test2(event)">...
CSS基础概念CSS(cascading style sheet) 汉译为层叠样式表，是用于控制网页样式。WEB标准中的表现标准语言，在网页中主要对网页信息的显示进行控制。目前推荐遵循的是W3C发布的CSS3.0版本；用来表现HTML或者XHTML等样式文件的计算机语言。1998年5月21日由w3C正式推出的css2.0HTML + CSS弥补html语言的不足缩减页面代码，提高访问速度;代码减少，页面文件就会小，占用网络带宽就少，客户端打开速度就快，用户体验就会更好结构清晰，...
一、CSS字体样式属性1.font-size:字号大小2.font-family:字体 font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等。 * {/*font-family: "微软雅黑";*/font-family: "microsoft yahei", Arial;/*font-family: Arial;*/}p {font-size: 16px; /*千万别忘了带px 单位*/line-height: 28px; /* 行高 行与行之间的距离*/ text-indent: 2em; /*段落首行缩进2个字 em 也是一个单位 1em 就是一个字的距...
CSS知识CSS（Cascading Style Sheet，层叠样式表）定义如何显示HTML元素。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。Css之车更丰富的文档外观，Css可以为任何元素的文本和背景设置颜色；允许在任何元素外围设置边框；允许改变文字的大小，装饰（如下划线），间隔，甚至可以确定是否显示文本。CSS语法每个CSS样式右两部分组成：选择器和声明。声明又包括属性和属性值。提示：声明使用花括号包围， ...
排版了很多页面，才发现自己忽视了一个很基本且重要的知识点：一个div在一般的浏览器中，算它的width，要计算其content，padding，border。但是在CSS中定义一个div的width值，是指其content的宽度。如：?123.div_ex{ width:241px; } 如图：原文：http://www.cnblogs.com/share123/p/3548109.html
一、 css介绍 什么是css：就是网页的布局和渲染效果 什么是查找标签：就是操作标签、 如何进行查找标签：将需要操作的标签查找方法写在style标签里面，在这个里面之姐就可以操作，对相对应的标签进行布局和渲染 style标签：里面写的都是css代码，进行操作标签，使标签的展现更加美观。二、css的引入方式 1 行列式：直接在标签的里面加上style属性，后面写上操作<p style="background-color: rebeccapurple">hell...
案例一：导航菜单的制作垂直菜单<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>无标题文档</title><style type="text/css">* {margin: 0;padding: 0;font-size:14px;}ul{list-style:none;width:100px;}a{text-decoration:none;display:block;height:30px;line-height:30px;width:100px;background-color:#ccc;margin-bottom: 3px;text-align:center;}a:hover{color:red;font-weight:bold;bac...