about CSS

发表于 更新于 分类于 ， 阅读次数： 评论数：

CSS引入方式

  • style属性
    html中每个标签都有style属性，css代码可以作为style的属性值引入
    1
    <标签名 style="CSS属性名1:CSS属性值1;CSS属性名2:CSS属性值2;">修饰内容</标签名>
  • style标签
    在heml和head标签中引入style标签，然后在标签内部写CSS代码
    1
    2
    3
    4
    5
    6
    <style type="text/css">
        选择器{
                属性1:属性值;
                属性2:属性值;
        }
    </style>
  • @import
    在style标签中使用@import语句导入外部的css文件
1
2
3
<style type="text/css">
    @import url(CSS文件地址);
</style>
  • link
    使用头标签link引入外部CSS文件
    1
    <link rel="stylesheet" type="text/css" href="css文件地址" />

CSS选择器

在CSS中，选择器是一种模式，用于选择需要添加样式的元素。下面将其分为基本选择器和扩展选择器两部分进行展开。

基本选择器

  • id选择器
    使用标签中id的属性值作为选择器名称
    1
    2
    3
    4
    #idName{
            background-color:#aaaaaa;
            color:#000000;
        }
  • class选择器
    定义标签中class的属性值，用于选择添加样式文件
    1
    2
    3
    4
    .className{
            background-color:#aaaaaa;
            color:#000000;
        }
  • 标签选择器
    用标签名作为选择器，选取元素进行样式添加
    1
    2
    3
    4
    tagName{
            background-color:#aaaaaa;
            color:#000000;
        }

扩展选择器

  • 关联选择器
    对有条件下的标签进行添加样式（如对div内的img进行样式设置）。
    1
    2
    3
    div img{
        background-color:#aaffff;
    }
  • 组合选择器
    多个标签使用同一样式时，使用该选择器
    1
    2
    3
    div,p{
        background-color:#aaffff;
    }
  • CSS伪类选择器
    css伪类用于像某些选择器添加特色样式效果，比如说超链接标签
a:link a:visited a:hover a:active
未访时 已访问后 悬停于链接之上时 点击链接时
在css定义中，a:hover必须置于a:link和a:visited之后才有效
a:active必须在a:hover之后，才是有效的。

CSS的盒子模型

css框架规定了元素框处理元素内容、内边距、边框和外边距的方式

border margin padding element
边框 外边距 内边距 元素

CSS浮动

CSS定位