CSS

  • Cascading Style Sheet,CSS就是层叠样式表，用来控制页面内容的样式

CSS和HTML结合方式

1.使用HTML标签的style属性

使用格式：

  • <标签名 style="样式名:样式值;样式名:样式值 样式值 样式值;"></标签名>
  • 多个样式之间以分号隔开；一个样式可以有多个值，多个值以空格隔开
  • 如：<div style="color:yellow;font-size:100px;border:1px solid red;">我是div</div>

    2.在head标签使用style标签设置(内嵌样式)

    使用格式：
    1
    2
    3
    4
    5
    6
    7
    8
    <head>
        <style type="text/css">
            标签名{
                key1:value;
                key2:value;
            }
        </style>
    </head>

    3.在head标签中的style标签使用@import(外部文件方式)

    使用格式：
    1
    2
    3
    4
    5
    <head>
        <style type="text/css">
            @IMPORT url("css文件的地址");
        </style>
    </head>

    4.在head标签中使用link标签(外部文件方式)(开发中经常使用)

    使用格式:
    1
    2
    3
    <head>
        <link rel="stylesheet" type="text/css" href="css文件路径" />
    </head>

CSS选择器

让我们的css样式选择作用在哪一些具体的标签之上

标签名选择器:作用在当前页面的所有该名称标签之上

格式：

1
2
3
标签名称{
    css代码;
}

ID选择器:作用在页面上的某个具体的标签之上

格式:

1
2
3
4
5
#id属性值{
    css代码;
}

<标签名 id="值"/>

注意：页面的id值不允许重复。

class选择器:作用在一组标签之上

格式：

1
2
3
4
.Class属性值{
    css代码;
}
<标签 class="xxxx">

组合选择器:不同的标签使用相同的css样式

格式：

1
2
3
选择器1, 选择器2...{
    css代码;
}

关联选择器:强调的是通过父亲查找孩子

格式：

1
2
3
4
<!--修改该父选择器的子选择器内容-->
父选择器 子选择器{
	css代码;
}

锚伪类选择器:锚伪类选择器开发中一般就作用在a标签之上。对a标签的未访问状态和已经访问状态设置不一样的css样式。

格式：

1
2
3
4
5
6
7
选中的标签:伪元素名称{
    css代码;
}
<!--例如-->
a : link{
    color:red;
}
  • ：伪元素名称
    • ：link 某个html标签未被点击之前的状态
    • ：visible 鼠标点击之后,松开了
    • ：hover 鼠标悬浮式
    • ：active 鼠标点击 但没有松开
  • 注意：上述4个伪元素是有先后顺序的。
    • L V H A

属性选择器:在原有选择器的基础上,通过标签的属性,再次对标签进行筛选。

格式：

1
2
3
4
5
6
7
选择器名[属性名='属性值'] {
    css样式;
}
<!--例如-->
input[id='aaa'] {
    border: 1px solid red;
}

CSS常用属性

1、文字和文本属性

  • color:颜色
  • font-size：大小
  • font-family：字体类型
  • text-decoration：线型 none underline line-through
  • text-align:内容对齐方式

    2、边框

  • border：border-width border-color border-style
  • border-width:边框宽度
  • border-color:边框颜色
  • border-style:边框的样式

    3、背景属性

  • background-color:背景颜色
  • background-image：背景图片
    • 注意：在css中 图片的写法 url(图片地址)
  • background-repeat：平铺方式
    • repeat repeat-x repeat-y no-repeat
    • 注意：开发中一般会使用background进行简写background:background-color background-image background-repeat

      4、列表属性

  • list-style-type:小标志
  • list-style-image:小图片
  • 属性值：url(图片地址)

    4、尺寸属性

  • width：宽度
  • height：高度

    5、显示属性

  • display:是否显示某个元素 值：none/block

    6、浮动属性

  • float:left/right
  • clear:both

边框(盒子模型)布局

  • <div></div>