侧边栏
river:20191023_css_note
CSS 基础笔记
CSS 用于给 HTML 添加样式。
插入样式
外部、内部、内联样式表，优先级依次递增：
<head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> <style type="text/css"> ... </style> <p style="color:#111;"> </head>
基础语法
标签 / 属性 / id / 类 / 派生 / 子元素 / 相邻兄弟选择器以及声明：
body,
[title=xxx],
#body,
.body,
.body *,
.body > strong,
.body + p {
font-family: serif;
text-align: center;
line-height: 1.7;
background-color: #111;
}
基本样式
背景：
background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center; background-color background-image background-repeat background-attachment background-position
文本：
text-align text-decoration text-indent text-transform word-spacing letter-spacing white-space direction
字体：
font-family: Georgia, 'New York', serif; font-size font-style font-weight font-variant
链接：
a:link a:visited a:hover a:active
列表：
list-style: url(example.gif) square inside list-style-image list-style-type list-style-position
表格：
border: 1px solid blue; border-collapse: collapse; border-spacing vertical-align
轮廓：
outline: #00ff00 dotted 3px; outline-color outline-style outline-width
盒模型
这是现在标准的盒模型，在此之前，IE 的 width 和 height 是包括到边框的。
- 相邻、包含元素间的
margin会彼此重合 - 元素方向顺序：上右下左
width height margin padding border border-width border-style border-color
定位
首先明确一下元素类型：
- 行内元素：占用一行，从左到右
- 行内块级元素：占用一块，从左到右
- 块级元素：占用一块，从上到下
display: inline; display: inline-block; display: block;
然后进行定位：
position: static; /* 默认值 */ position: relative; /* 相对元素原有位置偏移，其仍然占据原本的空间 */ position: absolute; /* 绝对定位：脱离文档流，相对页面边缘定位 */ position: fixed; /* 绝对定位：脱离文档流，相对浏览器窗口定位 */ top right bottom left z-index
关于浮动：
浮动最初只是用于制作包围文本的图片，现在常用来布局。
一旦元素被浮动，它就脱离文档流，相同父元素的元素们可以浮动到同一流中。
float: right;
伪类和伪元素
伪类和伪元素用于向某些选择器设置特殊效果：
p:first-child; /* 匹配第一个 <p> 元素 */
q:lang(no); /* 匹配语言为 no 的 <q> */
p:first-line; /* 匹配 <p> 自动换行后的第一行 */
p:first-letter; /* 匹配 <p> 文本的首字母 */
/* 在 h1 前后插入图像 logo.gif */
h1:before,
h1:after {
content: url(logo.gif);
}
常用单位
- px：像素值
- em：相对浏览器设定的标准尺寸
- rem：相对 HTML 根元素的尺寸
- 50%：相对父元素的百分比
更进一步
块级元素布局：
/* 水平居中 */ width: 70%; margin: auto; /* 绝对定位右对齐 */ position: absolute; right: 0px; /* 浮动对齐 */ float:right;
尺寸：
max-height max-width min-height min-width line-height
特殊效果：
display: none; /* 隐藏元素 */ cursor /* 绘制不同光标 */
水平导航栏效果：
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
a {
display: block;
width: 60px;
}
li {
display: inline;
float: left;
}
即去除浏览器默认样式后，行内化 <li>，并进行浮动成为一行。
实际上 <ul> 和 <li> 常被应用来做各种嵌套的单元项目。
图片透明度：
opacity: 0.4; filter: alpha(opacity=40); /* 针对 IE8 以及更早的版本 */
媒介类型：
@media screen {}
@media print {}
@media screen, print {}
@media screen {} 在之后常被用来制作响应式网页。
一些好习惯
river/20191023_css_note.txt · 最后更改: 2021/09/07 05:30 (外部编辑)
除额外注明的地方外，本维基上的内容按下列许可协议发布： CC Attribution-Noncommercial-Share Alike 4.0 International
