CSS笔记

2020-09-06  本文已影响0人  z_z

CSS

CSS样式书写格式

color: red

如何将CSS样式应用到元素上？

内联样式

<div style="color: white;background-color: red">文字内容</div>

文档样式表

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            color: white;
            background-color: red;
        }
    </style>
</head>

外部样式表

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="index.css">
</head>
image.png image.png

HTML和CSS的编写准则

<body>
    <img src="beer.png" alt="" width="300" height="400">
</body>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            background-color: red;
        }
        
        img {
            width: 300px;
            height: 400px;
        }
    </style>
</head>
<body>
    <img src="beer.png" alt="">
</body>
</html>

设置网页图标

   <link rel="icon" type="image/x-icon" href="http://www.jd.com/favicon.ico">
image.png

常用CSS属性

最常用的CSS属性值

background-color

color

span元素

div元素

CSS属性可用性

颜色

span {
   background-color: red;
}


        span {
            /*    十进制*/
            background-color: rgb(255,0,0);
            /*    十六进制*/
            background-color: #ff0000;
            /* 或者*/
            background-color: #f00;
        }

CSS属性-字体

font-size

font-family

       div {
            font-family: "Courier New","华文彩云";
        }

@font-face

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        @font-face {
            /*字体名称：可以随便写，但建议最好跟原字体名字一致*/
            font-family: "微米简书体";
            src: url("fonts/微米简书.otf");
        }
        div {
            font-family: "微米简书体";
            font-size: 50px;
        }
    </style>
</head>
<body>
<div>hello!我是微米简书体</div>

</body>
</html>
image.png

font-weight

font-sytle

font-variant

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span {
            font-size: 30px;
            font-variant: small-caps;
        }
    </style>
</head>
<body>
<span>123,GO!What's wrong?</span>

</body>
</html>
image.png

line-height

font

div {
   font: italic small-caps 700 20px/40px "微软雅黑" ;
}

CSS属性-文本

text-decoration

letter-spacing word-spacing

text-transform

text-indent

text-align

CSS选择器

元素选择器(type selectors)

div {
color: red;
}

<body>
<div>文字内容1</div>
<p>文字内容2</p>
<span>文字内容3</span>
<div>文字内容4</div>
</body>
image.png

通用选择器

* {
color: red;
}

<body>
<div>文字内容1</div>
<p>文字内容2</p>
<span>文字内容3</span>
</body>
image.png

id选择器

#one {
  color: red;
}

<body>
<div id="two">文字内容1</div>
<p id="one">文字内容2</p>
<span id="three">文字内容3</span>
</body>
image.png 
<span id="three">文字内容3</span>
<!--中划线隔开-->
 <div id="the-first-box"></div>
<!--下划线隔开-->
 <div id="the_second_box"></div>
<!--驼峰标识:第一个单词首字母小写，其他单词首字母大写-->
 <div id="theAThreadBox"></div>

类选择器

       .one {
           color: red;
       }

<body>
<div class="two">文字内容1</div>
<p class="one">文字内容2</p>
<span class="two one">文字内容3</span>
<div class="one">文字内容4</div>
</body>
image.png

属性选择器(attribute slecotors)

[title] {
       color: red;
}

<body>
<div title="one">文字内容1</div>
<div>文字内容2</div>
<div>
    <p title="two">文字内容3</p>
</div>
<span title="">文字内容4</span>
</body>
image.png

-属性选择器 - [attr$=val]

   [title$="one"] {
          color: red;
      }

  <body>
<div title="one">文字内容1</div>
<div title="twoone">文字内容2</div>
<div title="two one">文字内容3</div>
<div title="two-one">文字内容4</div>
<div title="two_one">文字内容5</div>
</body>

组合

后代选择器(descendant combinator)
div span {
    color: red;
}

<body>
<span>文字内容1</span>
<div>
    <span>文字内容2</span>
    <p>
        <span>文字内容3</span>
    </p>
</div>
<div>
    <span>文字内容4</span>
</div>
<span>文字内容5</span>
</body>
image.png
子选择器(child combinators)
div>span {
    color: red;
}

<body>
<span>文字内容1</span>
<div>
    <span>文字内容2</span>
    <p>
        <span>文字内容3</span>
    </p>
</div>
<div>
    <span>文字内容4</span>
</div>
<span>文字内容5</span>
</body>
image.png
相邻兄弟选择器
div+p {
    color: red;
}

</head>
<body>
<p>文字内容1</p>
<div>
    <p>文字内容3</p>
</div>
<p>文字内容3</p>
<p>文字内容4</p>
</body>
image.png
全体兄弟选择器
div~p {
    color: red;
}

<body>
<p>文字内容1</p>
<div>
    <p>文字内容3</p>
</div>
<p>文字内容3</p>
<p>文字内容4</p>
</body>
image.png
选择器组- 并集选择器
div,.one,[title="test"] {
    color: red;
}

<body>
<div>文字内容1</div>
<span title="test">文字内容2</span>
<p class="one">文字内容3</p>
</body>
选择器组-交集选择器
div.one {
    color: red;
}

<div class="one">文字内容1</div>
<span class="one">文字内容2</span>
<p class="one">文字内容3</p>
image.png

伪类

动态伪类

动态伪类-：focus

a:focus {
    outline: none;
}

tabindex属性

目标伪类(target pseudo-classes)

p:target {
    color: red;
}

<p id="ppp"></p>
<a href="#ppp"></a>
image.png
image.png

语言伪类(language pseudo-classes)

div:lang(en) {
    color: red;
}

<body lang="en">
<div>文字内容1</div>
<div lang="en">文字内容2</div>
<div lang="zh">文字内容3</div>
<div lang="en-us">文字内容4</div>
</body>
image.png

元素状态伪类(UI element states pseudo-classes)


input:enabled {
    border: 2px solid red;
}
input:disabled {
    border: 2px solid black;
}

input:checked {
    outline: 2px solid blue;
}

结构伪类

:nth-child(1)
:nth-child(2n)
:nth-child(2n+1)
:nth-child()的完整使用格式是:nth-child(an+b)
:nth-last-child()从最后一个子元素开始往前计数，
p:nth-child(n + 2):nth-last-child(n+2) {
    color: red;
}

<body>
<div>
    <p>文字内容1</p>
    <p>文字内容2</p>
    <p>文字内容3</p>
    <p>文字内容4</p>
    <p>文字内容5</p>
    <p>文字内容6</p>
</div>
</body>
image.png
:nth-of-type()、:nth-last-of-type()
其他 :first-child、:last-child、:first-of-type、:last-of-type、:only-child、only-of-type、root:
:empty
p:empty {
    width: 200px;
    height: 20px;
    background: red;
}

<body lang="en">
<p></p>
<p>文字内容1</p>
<p> </p>
<p><span></span></p>
<p>文字内容2</p>
</body>
image.png

否定伪类(negation pseudo-class)

/*除了第一个同级子类p元素和最后一个同级子类p元素以外的所有p元素*/
p:not(:first-of-type):not(:last-of-type) {
    color: red;
}

<body>
<p>文字内容1</p>
<p>文字内容2</p>
<p>文字内容3</p>
<p>文字内容4</p>
<p>文字内容5</p>
</body>
image.png 
/*除了p元素、body元素、html元素以外的所有元素都为红色*/
:not(p):not(body):not(html) {
    color: red;
}

<body>
<p>文字内容1</p>
<span>文字内容2</span>
<div>文字内容3</div>
<p>文字内容4</p>
</body>
image.png

伪元素(pseudo-elements)

::first-line
div::first-line {
    color: blue;
    text-decoration: underline;
}
image.png
::first-letter
div::first-letter {
    color: blue;
    text-decoration: underline;
    font-size: 30px;
}
image.png
::before和::after
div {
    color: red;
}
div::before {
    /*在div前面插入的内容"before"*/
    content: "before";
    font-size: 40px;

}
div::after {
    /*在div后面输入一张图片*/
    content: url("https://www.jd.com/favicon.ico");
}

<body>
<div>这是京东icon</div>
</body>
image.png

attr()

/*a[href^="http"]细节
a[href]表示元素里面必须href元素
href^="http" 表示href必须以http开头
*/
a[href^="http"]::after {
    content: "[" attr(href) "]";
}

<body>
<a href="http://www.jd.com">京东</a> <br>
<a href="http://www.baidu.com">百度</a><br>
<a href="http://www.taobao.com">淘宝</a><br>
<a href="http://www.520it.com">小码哥</a>
</body>
image.png

特性

属性继承
    <style>
        .div1 {
            font-size: 30px;
        }
        .div2 {
            font-size: 50%;
        }
        .div3  {
            /*inherit强制继承，继承的是30px * 50% = 15px,这里15px是计算值*/
            /*div3 的font-size 为15px*/
            font-size: inherit;
        }
    </style>

<body>
<div class="div1">div1
    <div class="div2">div2
        <div class="div3">div3</div>
    </div>
</div>
</body>

属性层叠

    <style>
        #box {
            color: red;
        }
        .word {
             color: green;
         }

        div {
            color:blue;
        }
    </style>

<div class="word" id="box">div1
image.png

使用经验

元素类型

块级、行内级元素

替换、非替换元素

元素的分类总结

image.png

display

inline-block

visibility

overflow

元素之间的空格

<span>span1</span> <span>span2</span>
<span>span3</span>
image.png

注意点

盒子模型

盒子

一个元素实际占用的宽度= border-left + padding-left + width + padding-right + border-right
一个元素实际占用的高度= border-top + padding-top + height + padding-bottom + border-bottom
一个元素的空间宽度= margin-left + border-left + padding-left + width + padding-right + border-right + margint-right
一个元素空间的高度= margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom

宽度、高度相关

内边距相关

外边距相关属性

上下margin传递

<div style="width: 100px;height: 100px;background: green;height: auto">
    <div style="width: 100px;height: 100px;background: red;margin-bottom: 10px">aa</div>
</div>
<div style="background: cyan">aa</div>

上下margin折叠

边框(border)相关属性

边框样式的取值

边框相关的属性

            border-top: 2px #0f0 dotted;
            border-right: 2px solid #f00;
            border-bottom: 2px dashed #0ff;
            border-left: 2px solid #ff0;
image.png 
border: 2px solid #f00;

边框的形状

边框妙用- 实现三角形

image.png

边框妙用-实现双色平分

        div {
            background: #DDD;
            width: 100px;
            height: 50px;
            border-bottom: 50px solid #111;
        }
image.png

行内级费替换元素的注意点

border---radius

border-radius

        div {
            width: 90px;
            height: 90px;
            border: 30px solid #000;
            background-color: #f00;
            border-radius: 50%;
        }
image.png

outline

box-shadow

box-shadow示例1

            width: 100px; height: 100px;
            border: 12px solid blue; background-color: orange;
            border-top-left-radius: 60px 90px;
            border-bottom-right-radius: 60px 90px;
            box-shadow: 64px 64px 12px 40px rgba(0,0,0,0.4) inset,
            12px 12px 0px 8px rgba(0,0,0,0.4) ;
image.png

box-shadow示例2

image.png

text-shadow

box-sizing

content-box

image.png

border-box

image.png

盒子模型

image.png

元素的水平居中显示

背景

background-image

background-repeat

background-size

            /*宽度150，高度180*/
            background-size: 150px 180px;
            /* 宽度保持原来的宽高比自动计算。高度180*/
            background-size: auto 180px;
            /* 宽度150，高度保持原来的宽高比自动计算*/
            background-size: 150px auto;
            background-size: 150px;
background-position

Sprite

background-attachment

background


        /*先将所有的image加载出来*/
        .div1,.div2,.div3 {
            background: url("images/mhxy.jpg");
        }
        /*在分别设置对应点的位置*/
        .div1 {
            background-position: -10px -30px;
        }
        .div2 {
            background-position: -60px -50px;
        }
        .div3 {
            background-position: -110px -75px;
        }

background-image和img的选择

文档画布背景

伪元素::first-line的背景

        div::first-line {
            background-color: blue;
        }
image.png

background实现图片链接

        a {
            background: url("bg001.png") no-repeat;
            width: 70px;
            height: 70px;
            display: inline-block;
        }
<a href="https://www.baidu.com"></a>

cursor

定位

标准流

margin、padding定位

position

relative 相对定位

上一篇 下一篇

猜你喜欢

热点阅读