css总结
一,css简述
CSS是级联样式表(Cascading Style Sheets)的缩写。HTML 用于撰写页面的内容,而 CSS 将决定这些内容该如何在屏幕上呈现。
二,css语法
h1 {color:blue;font-size:12px;}
h1是选择器,color,front-size为属性,blue,12px为值
- 选择器是您需要改变样式的对象(上图的规则就一级标题生效)。
- 每条声明由一个属性和一个值组成。(无论是一条或多条声明,都需要用{}包裹,且声明用;分割)
- 属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。
其他选择器
- id选择器
<p id="black">黑色</p>意思为页面上id等于黑色的部分呈现black
- class选择器
.red{
color:red;
}
<p class="red">我也可以是红的</p>
只要页面上某元素的class为red,那么就让它呈现红色。
组合选择器
- 后代选择器
.haha p{
background-color:yellow;
}.haha p 代表在div元素内有.haha这种类的所有元素
一
<div class="haha">
<p>Paragraph 1 in the div .haha.</p>黄背景
二
<p>Paragraph 4. Not in a div .haha.</p>无
- 子选择器
.haha > p{
background-color:yellow;
}.haha > p 代表在有.haha类的元素内的直接<p>元素。
一
<div class="haha">
<p>Paragraph 1 in the div .haha.</p>黄背景
二
<span>
</span>
</div>
<p>Paragraph 4. Not in a div .haha.</p>无
虽然段落二在.haha类中,但它的直接父元素是span,不是.haha的直接后代,所以不能选择。只有段落1
三种样式表
外部样式表
需在同一目录下新建一个.css的文件夹,使用时导入即可
内部样式表
放在heml文件中的为内部样式表
内联样式
直接把样式规则直接写到要应用的元素中
颜色,尺,对齐
用颜色名称也可以使用颜色RGB16进制值,来设定前景或背景的颜色
用 height 和 width 设定元素内容占据的尺寸。常见的尺寸单位有:像数 px,百分比 %等。
设置text-align属性为left, center, right即可(显然缺省的是左对齐)
盒子模型及布局控制
一个 HTML 元素可以看作一个盒子。从内到外,这个盒子是由内容 content, 内边距 padding, 边框 border, 外边距 margin构成的
Content 盒子的内容,如文本、图片等
Padding 填充,也叫内边距,即内容和边框之间的区域
Border 边框,默认不显示
Margin 外边距,边框以外与其它元素的区域
通过设置其边距来设置内容宽度
浮动
使用float让元素进行左右移动,让布局更加合理。
不透明度
opacity对任何元素(不过常用于图片)设置不透明度。
值在[0.0~1.0]之间,值越低,透明度越高
定位
position属性用于对元素进行定位。该属性有以下一些值:
static 静态
按照元素在 HTML出现的先后顺序从上到下,从左到右进行元素的安排。
relative 相对
设置为相对定位position: relative;,这将把元素相对于他的静态(正常)位置进行偏移
fixed 固定
设置为固定定位position: fixed;,这将使得元素固定不动(即使你上下左右拖动浏览器的滚动条)。
此时元素固定的位置仍由top, bottom, left, right属性确定,但相对的是视口(viewport,就是浏览器的屏幕可见区域)
absolute 绝对
设置为绝对定位position: absolute;,将使元素相对于其最近设置了定位属性(非static)的父元素进行偏移。
溢出
如果元素内容超过指定的范围,使用overflow属性来处理
visible 默认值,溢出部分不被裁剪,在区域外面显示
hidden 裁剪溢出部分且不可见
scroll 裁剪溢出部分,但提供上下和左右滚动条供显示
auto 裁剪溢出部分,视情况提供滚动条
伪类和伪元素
用于定义元素的某种特定的状态或位置等。
鼠标移到某元素上变换背景颜色
超链接访问前后访问后样式不同
离开必须填写的输入框时出现红色的外框进行警示
保证段落的第一行加粗,其它正常
选择器后使用:号,在割伤伪类/伪元素
常用
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
/* 鼠标移到段落则改变背景颜色 */
p:hover {background-color: rgb(226, 43, 144);}
p:first-line{color:blue;} /* 段落的第一行显示蓝色 */
p:first-letter{font-size: xx-large;} /* 段落的第一个字超大 */
h1:before { content:url(smiley.gif); } /* 在每个一级标题前插入该图片 */
h1:after { content:url(smiley.gif); } /* 在每个一级标题后插入该图片 */