CSS

CSS 层叠(级联)式样式表  cascade  style  sheet

用来美化html 网页的

1.颜色相关的样式

前景色

color: 单词

rgb(红色, 绿色, 蓝色)  范围从 0~255
16进制值  格式 `#红绿蓝` 范围从 0~FF       
rgba(红色, 绿色, 蓝色, 0.0~1.0)
    特殊取值
       白色 rgb(255,255,255)
       黑色 rgb(0,0,0)

 

背景色

background-color:颜色

背景图

background-image:url(图片地址)
background-repeat: no-repeat(不重复) repeat-x repeat-y 在哪个轴上重复

2.盒子模型

标签之间的间隙 外间距  margin
标签和内容的间隙 内间距  padding
边框 border

 

margin 外间距

    margin-left
    ...

border 边框

    border-left    边框宽度 边框线类型 边框颜色
    ...

padding 内间距

    padding-left 左
    padding-right 右
    padding-top 上
    padding-bottom 下

3.定位方式

 <div></div> 容器标签, 用来将其他标签进行分组，布局

position: absolute;  /*绝对定位*/
坐标的原点在左上角
left:  x 轴的坐标 
top:   y 轴的坐标
z-index z 轴坐标 取值越大，越靠上

width: 宽度
height: 高度

 

4.字体相关

font-size : 字体大小
font-family: 字体种类 （电脑上事先需要有这个字体）
font-style:italic; 倾斜
font-weight: bold; 加粗
text-decoration: line-through 贯穿线
text-decoration: underline  下划线

5.显示隐藏

display: none;  隐藏
display: block; 显示

6.样式表

1）类选择器

.名字

之后使用标签的 class="名字引用"

2） ID选择器
根据标签的id属性来进行匹配

#id值

之后使用标签的 id="id值"

3） 元素选择器
根据标签的名字进行匹配

优先级: 如果不同的选择器匹配到了同一个元素， 
* style属性定义的样式最高，id选择器优先级次之，类选择器次之，元素选择器最低, 
* 同级选择器，后定义的优先
* 可以用 !important 改变优先级，可以把优先级提升到最高

4）父子选择器

格式：

父标签>子标签

例如：找到一个p标签，并且它的父标签必须是div 

div>p {color:red;}

5） 祖先后代选择器
格式：

祖先标签 后代标签

6） 伪类选择器
按钮 鼠标移入改变样式，鼠标移除还原

:hover 移入
:first 匹配选中的第一个
:last 匹配选中的最后一个
:focus 获取焦点时

7.加样式的方法

1） 直接利用标签的 style属性
2） 利用style标签添加样式

<style>
    .class名称 { 具体样式 }
    #id名称 {具体样式} /*唯一的*/
    标签名 {具体样式} /*元素*/
    父选择器>子选择器 {具体样式}
    祖先选择器 后代选择器 {具体样式}
    :hover
    :focus
</style>

<标签 class="class名称">
<标签 id="id名称">
<标签>
...