样式三种使用方式
外部样式表
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">//""中不能有空格#####jstl的uri也是
</head>
内部样式表
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
内联样式
<p style="color: red; margin-left: 20px">
第一节：id,可以被js+css共用
选择器：
元素选择器
id选择器
类选择器
派生选择器-#header p{...}
权重
style=1000
id=0100
class,属性选择符(形如[attr=”"]等)=0010
元素=0001
权重按十进制理解，比如body div p为0003小于.a的0010
p.a与div .a权重一样高，后面的覆盖前面的。
p.a表示<p class="a">，用p .a无效（p与.a为父子关系是才有效）
1,例子1
<style>
h1.one{
visibility:visible;
}
h1.two{
visibility:visible;
position:relative;
left:200;
}
h1.three{
visibility:hidden;
left:10;
}
</style>
<h1 class="one">标题一</h1>
<h1 class="two">标题 二</h1>
<h1 class="three">标题 三</h1>
2,滤镜：
使用 filter 属性，必须指定元素的宽度。
向文本和图像添加更多的样式效果。比如：发光，模糊，阴影，波浪等
3,z-index层次序
<style>
img.x{
position:absolute;
img.x
{
position:absolute;
left:0px;
top:0px;
z-index:1;
}
</style>
<h1>这是一个标题小心覆盖</h1>
<img class="x" src="a.gif" tppabs="#"/>
<p>默认 z-index 是 0。Z-index 1 有更高的优先级。Z-index -1 有更低的优先级</p>
4,background
body{
background-attachment: scroll;//scroll默认情况//fixed-背景不随页面滚动条滚动
background-image: url("b.jpg");
background-repeat: no-repeat;//repeat-x横向填充
background-position:bottom;
}
5,innerHTML
修改一个元素的内容,不是追加内容，且元素的样式style不变
火狐不支持innerText故不要用innerText
6, onkeydown 按下键盘。 onkeypress 按压键盘。onkeyup 松开键盘。
//必须是如<input type="text"/>能接受键盘输入的，才有效。
onload
IE:页面完成加载。
ff:页面加载时。
7，经验：
css设置默认值时，不用加前缀直接用比如：
td{
border-bottom:1px solid #B7BDC3;
}
#coupon_table.tr3点前面必须有空格#coupon_table .tr3
8，Readonly-vs-disabled
Readonly只针对input(text / password)和textarea有效，
disabled对于所有的表单元素都有效，包括select, radio, checkbox, button等。元素的值不会被GET/POST传递
9，diplay-vs-visbility?
10， <div style="overflow: auto;height:500px;width:300px">
11，input--file只读
onkeypress="event.returnValue=false;" type="file" 只读，
id,class,标签3种选择器
12，指定作用范围################################
#couponDetail li{
width:33%;
float:left;
text-align:center;
}
#couponDetail li.title{
font-weight:bold;
}
.main li a{//混合嵌套
}
.main li a,.hmain li a{//2个class共用
}
border-collapse:collapse;//相邻边被合并
background-image:url("../img/line.jpg");
background-color:#eeeeee;
可以相互覆盖，后来者覆盖先来的
可以连续用2个并列的class--<div class="contentIn content1">
clear left;清除继承的left修饰
-------------------实例------------------------------
1，图文混排
<div><img/>...</div>对
<img/><div>...</div>错
当子元素width,height固定时，可以这样居中：
position: absolute;left: 50%;top: 50%;margin-left: -380px;margin-top: -200px;
分享到：
相关推荐
"HTML+CSS总结" HTML（HyperText Mark-up Language）是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML 文本是由 HTML 命令组成的描述性文本，HTML 命令可以说明文字、图形、动画、声音、表格、...
本文将基于“关于图片显示问题的CSS总结”这一主题，深入探讨CSS在处理图片显示时的关键知识点，以帮助开发者更好地理解和解决图片相关的问题。 首先，我们来看CSS中的`background-image`属性，它用于设置元素的...
这个"css总结文件(重要)"显然提供了一些关于CSS的核心概念、实用技巧和实例，对于学习和提升CSS技能非常有帮助。 首先，CSS的基础知识包括选择器、属性和值。选择器是用于指定我们要应用样式规则的HTML元素，例如`p...
dw cs6的css总结
CSS总结.xmind
【CSS总结】 CSS，全称Cascading Style Sheets（层叠样式表），是网页设计中的核心技术之一，用于控制网页元素的样式、布局和呈现。它与HTML或XML等标记语言结合使用，为网页添加视觉效果和结构化表现。在本篇内容...
这份"前端jscss总结笔记"涵盖了这两个主题的核心知识点，旨在帮助开发者深入理解和掌握它们。 JavaScript部分： 1. **基础语法**：包括变量声明（var、let、const）、数据类型（Number、String、Boolean、Null、...
### 总结 HTML和CSS的学习是成为一名前端开发者的基石。理解基本元素和样式规则，掌握布局技巧，以及了解响应式设计和预处理器的使用，将有助于创建出专业且用户友好的网页。通过不断实践和探索，可以逐步深化对这两...
在“css总结1”中，我们探讨了几种引入CSS样式的方法以及一些基本的CSS属性。 首先，让我们来看一下CSS样式的组成。一个CSS规则通常由两部分构成：选择器和声明。选择器指向你想要应用样式的HTML元素，如`h3`或`p`...
css总结很全，前端小白学习必备。后期还会发JS的。赚点积分
css学习总结思维导图
高效的CSS、可维护的CSS、组件化的CSS、hack-free CSS 书写高效CSS： 1、使用外联样式替代行间样式或者内嵌样式 2、不推荐使用内嵌样式
在前端开发领域，JavaScript（简称JS）和CSS是构建网页动态效果和美观界面不可或缺的两种技术。本笔记将深入探讨这两者的核心概念、语法特点以及它们在实际开发中的应用。 一、JavaScript概述 JavaScript是一种轻量...
CSS（Cascading Style Sheets）是用于控制网页元素样式的一种语言，对于自定义Liferay的主题和布局至关重要。以下是对Liferay CSS调整的一些关键点的详细说明： 1. **导航条背景色更改**：在`custom_common.css`...
HTML和CSS基础知识点总结（xmind编辑的思维导图）
常用的css总结 CSS整块文本溢出省略方案 < style > .wrap { width : 200 px ; white - space : normal ; overflow : hidden ; text - overflow : ellipsis ; display : - webkit - box ; - webkit - ...
对于小白新手入手可借鉴，都是HTML+CSS基础 打好基础才会让代码写的轻松像云上游走，不费吹灰之力学好HTML+CSS
css盒模型难点