CSS

CSS

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）等文件样式的计算机语言。简单的说html就是页面的基本框架，而CSS就是对这些框架进行美化，从而让页面看起来更好看。

样式规则

选择器{属性：属性值;属性:属性值;……}

引入方式

  1. 内联样式
<div id="div" style="color: red;font-size: 20px;">
    内联样式
</div>
  1. 内部样式
<style type="text/css">
    #div{
        color: red;
        font-size: 20px;
    }
</style>
  1. 外部样式
<link rel="stylesheet" type="text/css" href="css/index.css"/>

注：三种样式的优先级为——就近原则。

注释方式

/* CSS注释内容 */

选择器

  1. 标签选择器

    标签名{属性:属性值;属性:属性值;……}

    div

  2. 类选择器

    .类名{属性:属性值;属性:属性值;……}

    .div

  3. id选择器

    id值{属性:属性值;属性:属性值;……}

    div

  4. 并集选择器

    将各个要设置相同属性的选择器写一起，中间用逗号隔开，可以节省代码

    div,p

  5. 组合选择器

    组合选择器有限定样式选择器、后代选择器、子选择器、相邻兄弟选择器、后续兄弟选择器。

    ①div#div{color: red;font-size: 20px;} 表示为div标签中id为div的节点设置样式

    注:第一个为标签选择器，第二个为id选择器或类选择器。

    ②div p{color: red;font-size: 20px;} 为div标签里的所有p标签后代设置样式

    ③div>p{color: red;font-size: 20px;} 表示父类为div标签的p标签节点

    ④div+p{color: red;font-size: 20px;} 表示与div标签的相邻的p标签(向下相邻)

    ⑤div~p{color: red;font-size: 20px;} 表示与div标签同级的下面所有的p标签

  6. 属性选择器

    属性选择器是通过标签拥有的属性和其属性值来选中节点

    = 表示绝对对于

    div[id="mydiv"]{color: red;font-size: 20px;} div中id属性值是mydiv的

    ^ 表示以开头开头

    div[id^="my"]{color: red;font-size: 20px;} div中id属性值以my开头的

    $ 表示以什么结尾

    div[id$="div"]{color: red;font-size: 20px;} div中id属性值以div结尾的

    * 表示包含什么

    div[id*="di"]{color: red;font-size: 20px;} div中id属性值包含di的

伪类

CSS伪类是用来添加一些选择器的特殊效果。

  1. 伪类选择器

    ①:first-of-type

    p:first-of-type 选择的每个 p 元素是其父元素的第一个 p 元素

    ②:last-of-type

    p:last-of-type 选择每个p元素是其父元素的最后一个p元素

    ③:nth-of-type(n)

    p:nth-of-type(2) 选择所有p元素第二个为p的子元素

    ④:last-child

    p:last-child 选择所有p元素的最后一个子元素

    ⑤:nth-child(n)

    p:nth-child(2) 选择所有 p 元素的父元素的第二个子元素

    ⑥链接

    a:link {color:#FF0000;} /* 未访问的链接 /
    a:visited {color:#00FF00;} /     已访问的链接 /
    a:hover {color:#FF00FF;} /     鼠标划过链接 /
    a:active {color:#0000FF;} /     已选中的链接 */

    注意： 在CSS定义中，a:hover 必须被置于a:link 和 a:visited 之后，才是有效的。

    注意： 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

    注意：伪类的名称不区分大小写。

  2. 其他作用伪类

    ①:before

    p:before 在每个

    元素之前插入内容

    ②:after

    p:after 在每个

    元素之后插入内容

常用样式

1. 字体样式

font-family: 设置字体种类，如”宋体“
font-size: 设置字体大小
font-style: 设置字体样式，如”斜体“
font-weight: 设置字体粗细

font:字体样式的简写，顺序font-style font-variant font-weight font-size/line-height font-family

2.文本样式

color: 设置文本颜色

text-align：设置文本对齐

line-height：设置行高

text-shadow：设置文本阴影

3.背景样式

background-color：设置背景颜色

background-image：把图片设为背景

background-position：设置背景的起始位置

background-repeat：设置背景图片如何重复

background：背景设置简写

4.链接样式

链接伪类选择器：

  • a:link - 正常，未访问过的链接
  • a:visited - 用户已访问过的链接
  • a:hover - 当用户鼠标放在链接上时
  • a:active - 链接被点击的那一刻

去掉下划线：text-decoration:none;

5.列表样式

list-style-type：设置列表标志项类型

list-style-image：将图片设置为列表项标准

list-style：列表样式设置简写

浮动

浮动设置

浮动：float

属性值：left/right/both/none

left：左侧浮动

right：右侧浮动

none：不浮动

浮动清除

清除：clear

属性值: left/right/both

left：左侧不允许出现浮动元素

right：右侧不允许出现浮动元素

both：两侧都不允许出现浮动元素

none：允许两侧出现浮动

父级边框塌陷问题

  1. 增加父级元素的高度；

  2. 增加一个空的div标签，清除浮动

  3. 在父级元素增加一个overflow:

  4. 在父类添加一个伪类:after（推荐）

    #father:after{
    content: '';
    display: block;
    clear:both;
}

块级元素和行内元素(display)

display属性

属性值：

  • block 设置为块元素
  • inline 设置为行内元素
  • inline-block 设置为行内块元素
  • none 不显示，可以隐藏某个元素，且不会占用空间

盒子模型

1634724287213

  1. 外边距margin属性

    margin-top：设置上边距

    margin-right：设置右边距

    margin-bottom：设置下边距

    margin-left：设置左边距

    margin：设置边距简写，

    顺序实例:

    • margin:10px 5px 15px 20px;
      • 上边距是 10px
      • 右边距是 5px
      • 下边距是 15px
      • 左边距是 20px
    • margin:10px 5px 15px;
      • 上边距是 10px
      • 右边距和左边距是 5px
      • 下边距是 15px
    • margin:10px 5px;
      • 上边距和下边距是 10px
      • 右边距和左边距是 5px
    • margin:10px;
      • 所有四个边距都是 10px

  2. 边框boder属性

    border-color：设置边框颜色

    border-width：设置边框宽度

    border-style：设置边框样式具体

    border：设置边框简写，设置顺序border-width, border-style,和border-color.

    boder: 1px solid red;

  3. 内边距padding属性

    padding:设置内边距简写

    顺序实例：

    • padding:10px 5px 15px 20px;
      • 上填充是 10px
      • 右填充是 5px
      • 下填充是 15px
      • 左填充是 20px
    • padding:10px 5px 15px;
      • 上填充是 10px
      • 右填充和左填充是 5px
      • 下填充是 15px
    • padding:10px 5px;
      • 上填充和下填充是 10px
      • 右填充和左填充是 5px
    • padding:10px;
      • 所有四个填充都是 10px

  4. 盒子计算

    宽度：左外边距+左边框+左内边距+内容宽度+右内边距+右内边框+右外边距

    高度：上外边距+上边框+上内边距+内容高度+下内边距+下内边框+下外边距

定位

position属性

相对定位

position:relative;

相对其正常位置。移动相对定位元素，但它原本所占的空间不会改变。

绝对定位

position:absolute;

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于

固定定位

position:fixed;

元素的位置相对于浏览器窗口是固定位置。

即使窗口是滚动的它也不会移动

其他属性

  • 圆角边框

    border-radius

  • 透明度

    opacity

  • 层次

    z-index

  • 尺寸

    width

    height

  • 布局

    overflow

    属性值：

    • visible 默认值。内容不会被修剪，会呈现在元素框之外。
    • hidden 内容会被修剪，并且其余内容是不可见的。
    • hidden 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
    • auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
posted @ 2021-10-20 18:39  Java小羊  阅读(110)  评论(0)    收藏  举报