CSS笔记

W3C英文网站：https://www.w3.org/
W3Shcool中文网站：http://www.w3school.com.cn

概述

CSS指层叠样式表(Cascading Style Sheets),用来指导HTML元素的显示，实现了内容与表现分离，极大提高了工作效率。
通常采用外部样式表导入的方式实现内容与表现分离。
HTML引入CSS的4种方式：（优先级1-4, 1优先级最高）
1--内联样式（在HTML元素内）

<p style="color: sienna; margin-left: 20px">
    This is a paragraph
</p>

2--内部样式表（位于标签内）

<head>
    <style type="text/css">
        hr {color: sienna;}
        p {margin-left: 20px;}
        body {background-image: url("images/back40.gif");}
    </style>
</head>

type可以不写！

3--外部样式表在header引入

<head>
            <link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

4--浏览器默认样式

CSS语法

CSS语法由选择器和多条申明构成。

selector {declaration1;  declaration2;  ... declarationN }
h1 {color:red;  font-size:14px;}
p {font-family:  "sans serif";}

如果值为若干单词，则要给值加引号
每行只描述一个属性，用分号结束
CSS对大小写不敏感（注意：class 和 id 名称对大小写敏感）
p标签设置颜色的几种写法：

p { color: #ff0000; }
p { color: #f00; }
p { color: rgb(255,0,0); }
p { color: rgb(100%,0%,0%); }

CSS选择器

标签选择器：

h1,h2,h3,h4,h5,h6 {
     color: green;
}

body {
    font-family: Verdana, sans-serif;
}

根据上面这条规则，站点的 body 元素将使用 Verdana 字体

派生选择器：

li strong {
    font-style: italic;
    font-weight: normal;
}

id选择器：

#red {color:red;}

类选择器：

.center {text-align: center}

属性选择器：

[title]{
    color:red;
}

通配符选择器(*)：

*{
    color:red;
}

指定标签选择器:

p.box{
    color:red;
}

标注p的class为‘box’的p标签。

并集选择器

h1,h2,h3,h4,h5,h6 {
        color: green;
}

伪类选择器

a:link             访问前
a:visited        访问后
a:hover         鼠标移动到上方
a:active         点击状态

优先级：id选择器 > 类选择 > 标签选择器

CSS样式

背景

背景颜色：p {background-color: gray;}
背景图像：body {background-image: url(/i/eg_bg_04.gif);}
背景重复：background-repeat:
背景定位：background-position

文本

缩进文本：p {text-indent: 5em;}或者p {text-indent: -5em;}或者p {text-indent: 20%;}
水平对齐：text-align
字间隔：    p.spread {word-spacing: 30px;}或者p.tight {word-spacing: -0.5em;}
字母间隔：h4 {letter-spacing: 20px}或者h1 {letter-spacing: -0.5em}
字符转换：h1 {text-transform: uppercase}
文本装饰：
                a {text-decoration: none;}
                a {text-decoration: underline;}
	        a {text-decoration: overline;}			
	        a {text-decoration: line-through;}			
	        a {text-decoration: blink;}				
处理空白字符：
                 p {white-space: normal;}
                 white-space 属性的行为： 
                    pre-line、 normal、 nowrap、 pre、 pre-wrap

字体
CSS 定义了 5 种通用字体系列： Serif 字体、Sans-serif 字体、Monospace 字体、Cursive 字体、Fantasy 字体
指定字体系列：body {font-family: sans-serif;}
字体风格：normal、italic、oblique
字体加粗：
p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
字体大小：
h1 {font-size:60px;}
h2 {font-size:40px;}
p {font-size:14px;}
h1 {font-size:3.75em;} /* 60px/16=3.75em /
h2 {font-size:2.5em;} / 40px/16=2.5em /
p {font-size:0.875em;} / 14px/16=0.875em */
设置连接样式：
样式：
a:link {color:#FF0000;} /* 未被访问的链接 /
a:visited {color:#00FF00;} / 已被访问的链接 /
a:hover {color:#FF00FF;} / 鼠标指针移动到链接上 /
a:active {color:#0000FF;} / 正在被点击的链接 */
背景色：
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active
无序列表：
列表类型：ul {list-style-type : square}
列表图像：ul li {list-style-image : url(xxx.gif)}
（另外的列表标签：有序列表ol：li。普通列表dl：dt，dd）
表格：
表格边框：

table, th, td{
    border: 1px solid blue;
}

折叠边框：

table{
    border-collapse:collaps
}

表格宽度和高度

table{
    width:100%;
}

th{
    height:50px;
}

表格文本对齐

td{
    text-align:right;
}

表格内边距：padding
表格颜色：color

CSS定位

position: absolute; left,top,right,bottom对父类绝对定位。
position: fixed; left,top,right,bottom对浏览器绝对定位。
position: relative 相对定位。
"left:20" 会向元素的 LEFT 位置添加 20 像素。

h2{
    position:absolute;
    left:100px;
    top:150px;
}

display：显示类型
overflow：控制超出父级内容如何显示
overflow可能的值：
visible
默认值。内容不会被修剪，会呈现在元素框之外。
hidden
内容会被修剪，并且其余内容是不可见的。
scroll
内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto
如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit
规定应该从父元素继承 overflow 属性的值。

visibility：
可能的值
visible
默认值。元素是可见的。
hidden
元素是不可见的。
collapse
当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。
inherit
规定应该从父元素继承 visibility 属性的值。

CSS表格属性

border-collapse 是否合并表格边框
border-spacing 相邻表格的距离
caption-side 规定表格标题的位置
empty-cells 规定是否显示空单元格的背景和边框
table-layout 设置用于表格的布局算法

CSS的层叠性和继承性

选择你器优先级相同的情况下，后写的样式覆盖先写的。
继承属性：文字控制属性能继承，区块控制属性不能继承。

CSS 巧用 :before和:after

:before是css中的一种伪元素，可用于在某个元素之前插入某些内容。
:after是css中的一种伪元素，可用于在某个元素之后插入某些内容。

CSS盒子模型

margin 外边距
border 边框
padding 内边距
width、hight 宽、高
padding：10px 20px 40px 80px（顺序：上、右、下、左）
padding：10px 20px（三值写法：上、左右、下）
padding：10px 20px（两值写法：上下、左右）
padding：10px(单值写法：4边值相同)
firebug选中标签有可能下边距变窄，使用标签的类会解决此问题。firebug的bug。
如果盒子添加了border和padding属性，在宽高基础上减去相应的border和padding，否则整体尺寸会变大。
外边距塌陷/合并问题1：上下两个div，外边距margin合并，哪个边距大取哪个的值。
外边距塌陷/合并问题2：嵌套排列的div。
解决1：给父级添加border，或者overfloat：hidden。
解决2：给子级添加float: left属性。
行内标签的垂直内外边距：
margin和padding无效，垂直方向使用line-height
盒子居中：
margin 上下随意，左右设置为auto。条件：盒子有宽度，显示模式为块级

css知识碎片

行高
要使div里面一行文字垂直居中，设置div的line-hight跟文字一样高。
去掉下划线
text-decoration:none
添加下划线
text-decoration:underline
网页3步准备工作：

清空标签的默认样式。比如h1的margin，input的padding
body,div,p,span,a,image,ul,li,ol,dl,dt,dd,h1,h2,h3,h4,h5,h6,input{ margin:0; padding:0; list-style:none;}
这种效率比较低，不建议使用：*
设置全局样式
设置body的文字3属性
超链接的默认样式
超链接的颜色和下划线。
a {text-decration:none; color:#000eee; }
a:hover {}

浮动
标准流：块标签div独占一行，行标签span一行多标签共存。
属性：float: left | right
作用：使块级标签在一行共存。多个div可以在同一行排列
清除浮动
清除浮动的元素布局不会受到之前元素浮动的影响。
左右结构布局
任何左右结构都由3部分完成，一个标准流下的父级和2个浮动流的左右子级。
定位
- 相对定位：占位脱离，不改变盒子的显示模式。
  positon: relative left | top
- 绝对定位：脱离标准流，不占位置，行内模式
  positon: absolute left | top
  绝对定位默认以浏览器为参照物。
  绝对定位使用规则：子级对决定位，父级相对定位。
- 固定定位：实现盒子固定到浏览器之上。ie6显示为行内块。
  positon: fixed left | top
- z-Index作用：调整标签z轴堆叠顺序。z-index取值为整数，取值越大，堆叠越靠上。必须和定位属性配合使用才能生效。
CSS精灵
1张大图上包含小图。大图叫精灵或雪碧。核心技术：背景图定位
热区链接
要使用Dreamweaver软件。典型案例，地图上点击省份跳转到对应的网页。
浏览器兼容性测试：火狐和IE6，只测试这2款。（火狐兼容性最好，ie6兼容性最差）
IE6兼容性问题：

双倍边距问题（IEtester插件测试ie6），解决：添加_display:inline(下划线志愿id6认识)
图片链接有描边。解决：在清空标签默认环境设置img的border属性：border:none
书写不规范插入图像底下留白问题。解决：1.父级添加overflat:hidden.2.img添加display：block
CSS滤镜显示问题。ie11以下支持的滤镜：filter:alpha(opacity=60),其他浏览器:opacity:0.6
解决办法：2中都写上。注意：滤镜同时透明背景和内容，将内容和背景拆开存放分别定位。

posted @ 2019-09-03 23:43 BRYANT_2019 阅读(165) 评论(0) 编辑收藏举报

刷新页面返回顶部

凌晨4点的太阳