CSS

CSS语法

[选择器]
{
    [声明1];
    [声明2];
    [声明3];
    ...
}
[selector]
{
    [declaration1];
    [declaration2];
    [declaration3];
    ...
}

声明写法

属性1: 值1;
属性2: 值2;
属性3: 值3;
...
property1: value1;
property2: value2;
property3: value3;
...

选择器类型

/*id选择器*/
#id1
{
    color:red;
}
/*类选择器*/
.class1
{
    color:red;
}
/*html选择器*/
p
{
    color:red;
}
/*通配符选择器*/
*
{
    color:red;
}
/*兄弟选择器*/
a, a:link, a:visited, a:hover, a:active
{
    color:red;
    text-align:center;
}
/*父子选择器*/
#id1 > div.class1 > p
{
    color:red;
    text-align:center;
}

css插入样式表(样式引入)

<!--外部样式表-->
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<!--内部样式表-->
<head>
<style>
p
{
 color:red;
 text-align:center;
}
</style>
</head>
<!--内联样式表-->
<p style="color:red;text-align:center;">段落内容</p>
<!--多重样式-->
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<style>
p
{
 color:red;
 text-align:center;
}
</style>
</head>
<p style="color:red;text-align:center;">段落内容</p>

多重样式优先级

内联样式>内部样式>外部样式>浏览器默认样式

css属性
1. css背景属性
  - background(以下所有属性的简写[属性值顺序如下])
  - background-color 背景颜色
  - background-image 背景图像
  - background-repeat 背景平铺(独立于背景定位)
  - background-attachment 背景定位(独立于背景平铺)
  - background-position 背景位置
2. css文字属性
  - color 设置文本颜色
  - direction 设置文本方向。
  - letter-spacing 设置字符间距
  - line-height 设置行高
  - text-align 对齐元素中的文本
  - text-decoration 向文本添加修饰
  - text-indent 缩进元素中文本的首行
  - text-shadow 设置文本阴影
  - text-transform 控制元素中的字母
  - unicode-bidi 设置或返回文本是否被重写
  - vertical-align 设置元素的垂直对齐
  - white-space 设置元素中空白的处理方式
  - word-spacing 设置字间距
3. css字体属性
  - font 在一个声明中设置所有的字体属性
  - font-family 指定文本的字体系列
  - font-size 指定文本的字体大小
  - font-style 指定文本的字体样式
  - font-variant 以小型大写字体或者正常字体显示文本
  - font-weight 指定字体的粗细
4. css列表属性
  - list-style 简写
  - list-style-image 将图象设置为列表项标志
  - list-style-position 设置列表中列表项标志的位置
  - list-style-type 设置列表项标志的类型
5. css表格属性 border 表格边框 border-collapse 折叠边框 width 表格宽度 height 表格高度 text-align 文字对齐 vertical-align 文字对齐 color 文字颜色 background 背景相关设置 padding 表格内边距
6. 时间有限，逐步完善
css属性值
1. color background-color
  - white 白色
  - #FFFFFF 白色
  - rgb(255,255,255) 白色
  - rgba(255,255,255,0.3) 白色透明度30%
  - inherit 从父元素继承相应属性的值
2. background-image
  - url('background.jpg')
  - url('./background.jpg')
  - url('http://www.xxx.com/background.jpg')
  - inherit 从父元素继承相应属性的值
3. background-repeat
  - repeat 平铺
  - repeat-x 水平平铺
  - repeat-y 垂直平铺
  - no-repeat 不平铺
  - inherit 从父元素继承相应属性的值
4. background-attachment
  - scroll 背景图片随页面的其余部分滚动(默认)
  - fixed 背景图像是固定的
  - inherit 从父元素继承相应属性的值
5. background-position
  - left top 左上
  - left center 左中
  - left bottom 左下
  - right top 右上
  - right center 右中
  - right bottom 右下
  - center top 中上
  - center center 中中
  - center bottom 中下
  - x% y% 比例
  - xpos ypos x-y单位
  - inherit 从父元素继承相应属性的值
6. direction
  - ltr 文本方向从左到右
  - rtl 文本方向从右到左
  - inherit 从父元素继承相应属性的值
7. letter-spacing
  - normal 字符间距0
  - length -3px(自定义间距)
  - inherit 从父元素继承相应属性的值
8. line-height
  - normal 合理的行间距
  - number 1.1(此数字与当前字体尺寸相乘)
  - length -3px(自定义间距)
  - % 基于当前字体尺寸的百分比行间距
  - inherit 从父元素继承相应属性的值
9. text-align
  - left 把文本排列到左边
  - right 把文本排列到右边
  - center 把文本排列到中间
  - justify 两端对齐文本效果
  - inherit 从父元素继承相应属性的值
10. text-decoration
  - none 无修饰
  - overline 上划线
  - line-through 中划线
  - underline 下划线
  - blink 闪烁文本
  - inherit 从父元素继承相应属性的值
11. text-indent
  - length 0(固定缩进)
  - % 20%(百分比缩进)
  - inherit 从父元素继承相应属性的值
12. text-shadow
  - h-shadow 水平阴影位置
  - v-shadow 垂直阴影的位置
  - blur 模糊的距离
  - color 阴影的颜色
13. text-transform
  - none 无修饰
  - capitalize 每个单词以大写字母开头
  - uppercase 仅有大写字母
  - lowercase 仅有小写字母
  - inherit 从父元素继承相应属性的值
14. unicode-bidi
  - normal 无修饰
  - embed 创建一个附加的嵌入层面
  - bidi-override 创建一个附加的嵌入层面重新排序取决于direction属性
  - initial 设置该属性为它的默认值请参阅 initial
  - inherit 从父元素继承相应属性的值
15. vertical-align
  - baseline 元素放置在父元素的基线上
  - sub 垂直对齐文本的下标
  - super 垂直对齐文本的上标
  - top 把元素的顶端与行中最高元素的顶端对齐
  - text-top 把元素的顶端与父元素字体的顶端对齐
  - middle 把此元素放置在父元素的中部
  - bottom 把元素的顶端与行中最低的元素的顶端对齐
  - text-bottom 把元素的底端与父元素字体的底端对齐
  - length -3px(指定高度)
  - % -20%使用 line-height 属性的百分比值来排列此元素
  - inherit 从父元素继承相应属性的值
16. white-space
  - normal 空白会被浏览器忽略
  - pre 空白会被浏览器保留
  - nowrap 文本不会换行
  - pre-wrap 保留空白符序列但是正常换行
  - pre-line 合并空白符序列但是保留换行符
  - inherit 从父元素继承相应属性的值
17. word-spacing
  - normal 定义单词间的标准空间
  - length 定义单词间的固定空间
  - inherit 从父元素继承相应属性的值
18. font
  - font-style 规定字体样式
  - font-variant 规定字体异体
  - font-weight 规定字体粗细
  - font-size 规定字体尺寸和行高
  - line-height 规定字体尺寸和行高
  - font-family 规定字体系列
  - caption 定义被按钮、下拉列表等标题控件使用的字体
  - icon 定义被图标标记使用的字体
  - menu 定义被下拉列表使用的字体
  - message-box 定义被对话框使用的字体
  - small-caption caption字体的小型版本
  - status-bar 定义被窗口状态栏使用的字体
19. font-family
  - family-name times courier arial
  - generic-family serif sans-serif cursive fantasy monospace
20. font-size
  - xx-small 极小
  - x-small 较小
  - small 小
  - medium 中
  - large 大
  - x-large 较大
  - xx-large 极大
  - smaller 把font-size设置为比父元素更小的尺寸
  - larger 把font-size设置为比父元素更大的尺寸
  - length 10px(把font-size设置为一个固定的值)
  - % 20%(把font-size设置为基于父元素的一个百分比值)
  - inherit 从父元素继承相应属性的值
21. font-style
  - normal 无修饰
  - italic 斜体
  - oblique 倾斜
  - inherit 从父元素继承相应属性的值
22. font-variant
  - normal 无修饰
  - small-caps 小型大写字母的字体
  - inherit 从父元素继承相应属性的值
23. font-weight
  - 100 定义由粗到细的字符
  - 200 定义由粗到细的字符
  - 300 定义由粗到细的字符
  - 400 定义由粗到细的字符等同于 normal
  - 500 定义由粗到细的字符
  - 600 定义由粗到细的字符
  - 700 定义由粗到细的字符等同于 bold
  - 800 定义由粗到细的字符
  - 900 定义由粗到细的字符
  - normal 标准的字符
  - bold 粗体字符
  - bolder 定义更粗的字符
  - lighter 定义更细的字符
  - inherit 从父元素继承相应属性的值
24. list-style
  - list-style-type 设置列表项标记的类型
  - list-style-position 设置在何处放置列表项标记
  - list-style-image 使用图像来替换列表项的标记
  - initial 将这个属性设置为默认值
  - inherit 从父元素继承相应属性的值
25. list-style-image
  - none 无图形被显示
  - url('image.jpg')
  - url('./image.jpg')
  - url('http://www.xxx.com/image.jpg')
  - inherit 从父元素继承相应属性的值
26. list-style-position
  - outside 保持标记位于文本的左侧
  - inside 列表项目标记放置在文本以内
  - inherit 从父元素继承相应属性的值
27. list-style-type
  - disc 实心圆
  - none 无标记
  - circle 空心圆
  - square 实心方块
  - decimal 阿拉伯数字
  - decimal-leading-zero 0开头的数字
  - lower-roman i ii iii iv v
  - upper-roman I II III IV V
  - lower-alpha a b c d e
  - upper-alpha A B C D E
  - lower-greek αβγδε希腊字母
  - lower-latin a b c d e小写拉丁字母
  - upper-latin A B C D E大写拉丁字母
  - hebrew 希伯来编号
  - armenian 亚美尼亚编号
  - georgian an ban gan乔治亚编号
  - cjk-ideographic 简单的表意数字
  - hiragana a i u e o ka ki日文片假名
  - katakana A I U E O KA KI日文片假名
  - hiragana-iroha i ro ha ni ho he to日文片假名
  - katakana-iroha I RO HA NI HO HE TO日文片假名
28. 时间有限，逐步完善
29. css盒子模型
  - 标准模型
```
  div
  {
      width: 400px;
      height: 300px;
      margin: 10px;
      padding: 10px;
      border: 10px solid rgb(0,255,0);
  }
```
30. 时间有限，逐步完善

css常用技巧

超链接点击后hover不出现怎么办

a:link{ background:#FF0000;}
a:visited{background:#00FF00;}
a:hover{background:#0000FF;}
a:active{background:#000000;}

字符过长溢出div解决
```
word-wrap: break-word;
```

弹窗提醒

span{
    top: 100px;
    left: 100px;
    opacity: 0.5;
    position: absolute;
    background-color: rgba(0,0,0, 0.5);
}

CSS

CSS

css常用技巧

results matching ""

No results matching ""