1. 技术文章
  2. 前端三贱客 -- CSS

前端三贱客 -- CSS

由 那年仲夏 提交于 2020-04-04 17:42:43

CSS（Cascading Style Sheets）给你的html页面穿上衣服让其看起来性感，美观。

css选择器

类选择器

<!-- class选择器以"."开头,html用class="xxx"引用 -->
<style type="text/css">
    .cl{
        background-color: blue;
        width: 200px;
        position: absolute;
        left: 0;top: 50px;bottom: 0;
    }
</style>
<div class="cl">class test</div>
View Code

ID选择器

 1 <!-- id选择器:以"#"开头,html用id="xxx"引用 -->
 2 <style type="text/css">
 3     #id1{
 4         background-color: red;
 5         height: 30px;
 6         font-size: 18px;
 7         text-align: center;
 8         line-height: 30px;
 9     }
10 </style>
11 <div id="id1">好好学习，天天向上</div>
View Code

标签选择器

<!--针对a标签设置属性-->
<style type="text/css">
    a {
        color: red;
    }
</style>

<ul>
    <li>
        <a href="https://www.kugou.com/">Hello Kugou</a>
    </li>
</ul>
View Code

属性选择器

<style type="text/css">
    input[type="text"]{
        width: 150px;
        height: 28px;
        background-color: yellow;
        font-family: Verdana,Arial;
        font-size: 20px;
        display: block;
    }
</style>

<form action="xxx.xxx.com" method="post">
    <input type="text" name="user1" value="用户名">
    <input type="passwd" name="pwd" value="">
</form>
View Code 
1 <style type="text/css">
2     .header[name1="testName"]{
3         color: red;
4     }    
5 </style>
6 <div class="header" >床前明月光</div>
7 <div class="header" name1="testName">危楼高百尺</div>
View Code

层级选择器

<!-- 层级选择器，c1下的p标签。就近原则 -->
<style type="text/css">
    .c1{
        background-color: pink;
        height: 80px;
    }
    .c1 p{
        height: 28px;
        color: green;
    }
</style>

<body>
    <div class="c1">
        <p>层级选择器</p>
    </div>
</body>
View Code

css样式

1. css背景

1.1 css背景色

<head>
    <title></title>
    <style type="text/css">
        body{
            background-color: gray;
            margin: 0 auto;
        }
        .pg-header{
            background-color: blue;
            font-size: 38px;
            text-align: center;
            color: red;
        }
    </style>
</head>
<body>
    <div class="pg-header">
        背景色测试
    </div>
</body>

1.2 css背景图片

<head>
    <title></title>
    <style type="text/css">
        body{
            background-color: gray;
            margin: 0 auto;
        }
        .pg-header{
            background-color: blue;
            font-size: 38px;
            text-align: center;
            color: red;
        }
    </style>
</head>
<body>
    <div class="pg-header">
        背景色测试
    </div>
</body>

2. css字体

2.1 color (设置字体颜色)

<div style="color: red">且行且歌，行稳致远。</div>

2.2 font-family(字体)

<style type="text/css">
    p .serif{font-family:"Times New Roman",Georgia,Serif}
    p .sansserif{font-family:Arial,Verdana,Sans-serif}
</style>
<h1>CSS font-family</h1>
<p class="serif">This is a paragraph, shown in the Times New Roman font.</p>
<p class="sansserif">This is a paragraph, shown in the Arial font.</p>

2.3 font-style(字体风格)

<style type="text/css">
    p.normal {font-style:normal}
    p.italic {font-style:italic}    /* 斜体字*/
    p.oblique {font-style:oblique}  /* 倾斜*/
</style>
<p class="normal">This is a paragraph, normal.</p>
<p class="italic">This is a paragraph, italic.</p>
<p class="oblique">This is a paragraph, oblique.</p>

2.4 font-weight(字体加粗)

<style type="text/css">
    p.normal {font-weight: normal}
    p.thick {font-weight: bold}
    p.thicker {font-weight: 900}
</style>
<p class="normal">且行且歌，行稳致远。</p>
<p class="thick">且行且歌，行稳致远。</p>
<p class="thicker">且行且歌，行稳致远。</p>

2.5 font-size(字体大小)

<style type="text/css">
    h1{
        font-size: 300%;
    }
    h2{
        font-size: 200%
    }
    p{
        font-size: 100%
    }
</style>
<h1>This is h1</h1>
<h2>This is h2</h2>
<p>This is p</p> 

3. css文本

3.1 text-indent(首行文本缩进)

<style type="text/css">
    div#outer {width: 500px;}
    /* text-indent [百分比|像素值] 首行文本缩进 */
    div#inner {text-indent: 10%;}
    div#inner01 {text-indent: 50px;}
    p {width: 200px;}
</style>

<div id="outer">
    <div id="inner">some text. some text. some text.
        <p>this is a paragragh.this is a paragragh.this is a paragragh.</p>
    </div>
    <div id="inner01">some text. some text. some text.</div></div>

3.2  text-align(水平对齐)

<style type="text/css">
    div{
        height: 30px;
        background: gray;
        width: 980px;
        margin: 0 auto;
    }
    .c1{
        text-align: center;
        color: red;
    }
    .c2{
        text-align: left;
        color: blue;
    }
    .c3{
        text-align: right;
        color: yellow;
    }
</style>
<div class="c1">文本居中</div>
<div class="c2">文本靠左</div>
<div class="c3">文本靠右</div>

3.3 word-spacing(字间隔)

<style type="text/css">
    p.spread {word-spacing: 30px;}
    p.tight {word-spacing: -0.5em;}
</style>
<p class="spread">This is a paragraph.</p>
<p class="tight">This is a paragraph.</p>

3.4 letter-spacing(字符间隔)

<style type="text/css">
    h1 {letter-spacing: -0.5em;}
    h2 {letter-spacing: 20px;}
</style>
<h1>This is header 1</h1>
<h4>This is header 4</h4>

3.5 text-transform(文本大小写转换)

<style type="text/css">
    h1 {text-transform:uppercase}    /* 所有字符大写 */
    h2 {text-transform:capitalize}   /* 收字母大写 */
    p {text-transform:lowercase}     /* 所有字符小写 */
</style>
<h1>This is a test</h1>
<h2>This is a test</h2>
<p>This is a test</p>

3.6 text-decoration(文本修饰)

<p style="text-decoration: none">This is a test</p>         <!-- 默认。定义标准的文本。 -->
<p style="text-decoration: underline">This is a test</p>    <!-- 定义文本下划线 -->
<p style="text-decoration: overline">This is a test</p>     <!-- 定义文本上划线 -->
<p style="text-decoration: line-through">This is a test</p> <!-- 定义穿过文本的划线 -->
<p style="text-decoration: blink">This is a test</p>        <!-- 定义闪烁的文本 -->

3.7 line-height(设置行高)

<style type="text/css">
    .header{
        height: 38px;
        background-color: gray;
    }
    .header p{
        line-height: 38px;
    }
</style>
<div class="header"><p>Hello Kugou</p></div>

4. css链接

<style type="text/css">
    a:link {color:#FF0000;}    /* 未被访问的链接 */
    a:visited {color:#00FF00;} /* 已被访问的链接 */
    a:hover {color:#FF00FF;}   /* 鼠标指针移动到链接上 */
    a:active {color:#0000FF;}  /* 正在被点击的链接 */
</style>
<p><b><a href="http://www.kugou.com" target="_blank">这是一个链接</a></b></p>
<p><b>注释：</b>为了使定义生效，a:hover 必须位于 a:link 和 a:visited 之后！！</p>
<p><b>注释：</b>为了使定义生效，a:active 必须位于 a:hover 之后！！</p>
<style type="text/css">
    a:link,a:visited{
        background-color: #FF00FF;
        display: block;
        width: 200px;
        height: 38px;
        line-height: 38px;
        text-align: center;
        text-decoration: none;
    /*     border-radius: 50%; */
    }
    a:hover,a:active{
        background-color: gray;
        color: blue;
    }
</style>
<a href="https://www.kugou.com" target="_blank">Hello Kugou</a>

5. css列表

  1 <style type="text/css">
  2 ul.none {list-style-type: none}
  3 ul.disc {list-style-type: disc}
  4 ul.circle {list-style-type: circle}
  5 ul.square {list-style-type: square}
  6 ul.decimal {list-style-type: decimal}
  7 ul.decimal-leading-zero {list-style-type: decimal-leading-zero}
  8 ul.lower-roman {list-style-type: lower-roman}
  9 ul.upper-roman {list-style-type: upper-roman}
 10 ul.lower-alpha {list-style-type: lower-alpha}
 11 ul.upper-alpha {list-style-type: upper-alpha}
 12 ul.lower-greek {list-style-type: lower-greek}
 13 ul.lower-latin {list-style-type: lower-latin}
 14 ul.upper-latin {list-style-type: upper-latin}
 15 ul.hebrew {list-style-type: hebrew}
 16 ul.armenian {list-style-type: armenian}
 17 ul.georgian {list-style-type: georgian}
 18 ul.cjk-ideographic {list-style-type: cjk-ideographic}
 19 ul.hiragana {list-style-type: hiragana}
 20 ul.katakana {list-style-type: katakana}
 21 ul.hiragana-iroha {list-style-type: hiragana-iroha}
 22 ul.katakana-iroha {list-style-type: katakana-iroha}
 23 </style>
 24 
 25 <ul class="none">
 26 <li>"none" 类型</li>
 27 <li>茶</li>
 28 <li>可口可乐</li>
 29 </ul>
 30 
 31 <ul class="disc">
 32 <li>Disc 类型</li>
 33 <li>茶</li>
 34 <li>可口可乐</li>
 35 </ul>
 36 
 37 <ul class="circle">
 38 <li>Circle 类型</li>
 39 <li>茶</li>
 40 <li>可口可乐</li>
 41 </ul>
 42 
 43 <ul class="square">
 44 <li>Square 类型</li>
 45 <li>茶</li>
 46 <li>可口可乐</li>
 47 </ul>
 48 
 49 <ul class="decimal">
 50 <li>Decimal 类型</li>
 51 <li>茶</li>
 52 <li>可口可乐</li>
 53 </ul>
 54 
 55 <ul class="decimal-leading-zero">
 56 <li>Decimal-leading-zero 类型</li>
 57 <li>茶</li>
 58 <li>可口可乐</li>
 59 </ul>
 60 
 61 <ul class="lower-roman">
 62 <li>Lower-roman 类型</li>
 63 <li>茶</li>
 64 <li>可口可乐</li>
 65 </ul>
 66 
 67 <ul class="upper-roman">
 68 <li>Upper-roman 类型</li>
 69 <li>茶</li>
 70 <li>可口可乐</li>
 71 </ul>
 72 
 73 <ul class="lower-alpha">
 74 <li>Lower-alpha 类型</li>
 75 <li>茶</li>
 76 <li>可口可乐</li>
 77 </ul>
 78 
 79 <ul class="upper-alpha">
 80 <li>Upper-alpha 类型</li>
 81 <li>茶</li>
 82 <li>可口可乐</li>
 83 </ul>
 84 
 85 <ul class="lower-greek">
 86 <li>Lower-greek 类型</li>
 87 <li>茶</li>
 88 <li>可口可乐</li>
 89 </ul>
 90 
 91 <ul class="lower-latin">
 92 <li>Lower-latin 类型</li>
 93 <li>茶</li>
 94 <li>可口可乐</li>
 95 </ul>
 96 
 97 <ul class="upper-latin">
 98 <li>Upper-latin 类型</li>
 99 <li>茶</li>
100 <li>可口可乐</li>
101 </ul>
102 
103 <ul class="hebrew">
104 <li>Hebrew 类型</li>
105 <li>茶</li>
106 <li>可口可乐</li>
107 </ul>
108 
109 <ul class="armenian">
110 <li>Armenian 类型</li>
111 <li>茶</li>
112 <li>可口可乐</li>
113 </ul>
114 
115 <ul class="georgian">
116 <li>Georgian 类型</li>
117 <li>茶</li>
118 <li>可口可乐</li>
119 </ul>
120 
121 <ul class="cjk-ideographic">
122 <li>Cjk-ideographic 类型</li>
123 <li>茶</li>
124 <li>可口可乐</li>
125 </ul>
126 
127 <ul class="hiragana">
128 <li>Hiragana 类型</li>
129 <li>茶</li>
130 <li>可口可乐</li>
131 </ul>
132 
133 <ul class="katakana">
134 <li>Katakana 类型</li>
135 <li>茶</li>
136 <li>可口可乐</li>
137 </ul>
138 
139 <ul class="hiragana-iroha">
140 <li>Hiragana-iroha 类型</li>
141 <li>茶</li>
142 <li>可口可乐</li>
143 </ul>
144 
145 <ul class="katakana-iroha">
146 <li>Katakana-iroha 类型</li>
147 <li>茶</li>
148 <li>可口可乐</li>
149 </ul>
View Code

6. hover

<!DOCTYPE html>
<html>
<head>
    <title>dasd</title>
    <style type="text/css">
        .it{
            width: 200px;
            height: 200px;
        }
        .it:hover{            /* hover:用于选择鼠标指针浮动在上面的元素 */
            color: yellow;
        }
        .c1{
            border: 1px solid;
            background-color: green;
        }
        .it:hover .c2{
            color: white;
        }
        .c2{
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="it">
        <div class="c1">xxx</div>
        <div class="c2">yyy</div>
    </div>
</body>
</html>
View Code

7. css框模型

7.1 border

 <div style="height: 20px;border:2px solid red"></div> 

7.2 margin（外边距）

<style type="text/css">
    p.margin {margin: 2cm 4cm 3cm 4cm}
</style>
<p>这个段落没有指定外边距。</p>
<p class="margin">这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。</p>
<div style="height: 200px;background-color: gold;"></div>
<div style="height: 200px;background-color: pink;margin-top: 20px;"></div>

7.3 padding（内边距）

<style type="text/css">
    td.test1 {padding: 1.5cm}
    td.test2 {padding: 0.5cm 2.5cm}
</style>
<table border="1">
    <tr><td class="test1">这个表格单元的每个边拥有相等的内边距。</td></tr>
</table>
<br />
<table border="1">
    <tr><td class="test2">这个表格单元的上和下内边距是 0.5cm，左和右内边距是 2.5cm。</td></tr>
</table>

8. css定位

8.1 display

display 属性介绍

 1 inline（默认值）
 2   1.使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行. 
 3   2.不能更改元素的height，width的值，大小由内容撑开. 
 4   3.可以使用padding，margin的left和right产生边距效果，但是top和bottom就不行.
 5 
 6 block
 7   1.使元素变成块级元素，独占一行，在不设置自己的宽度的情况下，块级元素会默认填满父级元素的宽度. 
 8   2.能够改变元素的height，width的值. 
 9   3.可以设置padding，margin的各个属性值，top，left，bottom，right都能够产生边距效果.
10 
11 inline-block
12   1.结合了inline与block的一些特点，结合了上述inline的第1个特点和block的第2,3个特点.
13 
14 none
15   1.元素不显示
View Code

display 举例

<h1>div标签</h1>
<div style="background-color: #2aabd2;display: inline;height: 60px;">我是div</div>
<div style="background-color: #2aabd2;height: 60px;">我是div</div>
<h1>span标签</h1>
<span style="background-color:gold;height: 60px;">我是span</span>
<span style="background-color:gold;display: block;height: 60px;">我是span</span>
<!--总结，HTML标签中 div和span标签可以通过display属性完全互换，其实记住一个div就行了。-->
<h1>特殊的display:inline-block</h1>
<div style="display: inline-block;background-color: pink;height: 80px;">我是</div>
<div style="display: inline-block;background-color: goldenrod;height: 80px;">行内+块级标签</div>

8.2 float(让标签飘起来)

<div style="width: 300px;border: 1px solid red;">
<div style="width: 98px; height: 30px; border: 1px solid green; float: left;"></div>
<div style="width: 98px; height: 30px; border: 1px solid green; float: left;"></div>
<div style="width: 98px; height: 30px; border: 1px solid green; float: left;"></div>
<div style="width: 98px; height: 30px; border: 1px solid green; float: left;"></div>
<div style="width: 98px; height: 30px; border: 1px solid green; float: left;"></div>
<div style="width: 98px; height: 30px; border: 1px solid green; float: left;"></div>
<div style="width: 98px; height: 30px; border: 1px solid green; float: left;"></div>
<!-- 指定不允许元素周围有浮动元素。 -->
<div style="clear: both"></div>
<h2>向左浮动</h2>
<div style="background-color: pink;">
    <div style="float:left;color: green;">高山流水</div>
    <div style="float: left;color: red;">下里巴人</div>
    <!-- 清除浮动，与使用了float属性的标签放在同一级 -->
    <div style="clear:both;"></div>
</div>
<h2>向右浮动</h2>
<div>
    <div style="float:right;width: 100px;background-color: green;">高山流水</div>
    <div style="float: right;width: 100px;background-color: red;">下里巴人</div>
    <div style="clear: both;"></div>
</div>
<h2>一个向左一个向右</h2>
<div>
    <div style="float:left;width: 100px;background-color: green;">高山流水</div>
    <div style="float: right;width: 100px;background-color: red;">下里巴人</div>
    <div style="clear: both;"></div>
</div>

8.3 position

position 属性介绍

 1 static（默认值）
 2 该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top、right、bottom、left 属性无效。
 3 
 4 absolute
 5 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
 6 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定
 7 
 8 fixed
 9 生成绝对定位的元素，相对于浏览器窗口进行定位。
10 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
11 
12 relative
13 生成相对定位的元素，相对于其正常位置进行定位。
14 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
View Code

position 举例

<head>
    <meta charset="UTF-8">
    <title>CSS-position-static</title>
    <style>
        .container{
            background-color: #868686;
            height: 300px;
        }
        .content{
            background-color: yellow;
            width: 100px;
            height: 100px;
            position: static;
            left: 10px;/* 这个left没有起作用 */
        }
    </style>
</head>
<body style="margin:auto">
    <div class="container">
        <div class="content"></div>
    </div>
</body>
View Code 
<body>
    <style type="text/css">
        .pg-header{
            /* 绝对定位，相对当前body定位，滚动鼠标位置会变。 */
            position: absolute; 
            right: 0;
            bottom: 0;
            width: 50px;
            height: 50px;
            background-color: red;
        }
        .pg-body{
            background-color: gray;
            height: 1800px;
        }
    </style>
    <div class="pg-header">返回顶部</div>
    <div class="pg-body"></div>
</body>
View Code 
<body style="margin: auto">
    <style type="text/css">
        .pg-header{
            background-color: gray;
            height: 48px;
            line-height: 48px;
            /* 标题固定浏览器窗口开头 */
            position: fixed ;top: 0;right: 0;left: 0;       
        }
        
        .conten{
            word-spacing: 20px;
            width: 980px;
            margin: 0 auto;
        }
        .pg-header a{
            display: inline-block;
            padding: 0 10px;
            color: white;
            /* word-spacing: 20px; */
            text-decoration: none;
            letter-spacing: 3px;
            font-size: 18px;
        }

        .pg-header a:hover{
            color: red;
            background-color: blue;
        }

        .pg-body{
            background-color: green;
            height: 1800px;
            margin-top: 48px;
        }
    </style>
    <div class="pg-header">
        <div class="conten">
            <a href="http://www.kugou.com">
                <img style="height: 30px;width: 30px;" src="./image/kugou.jpg">
            </a>
            <div style="float: right;">
                <a href="">登录</a>
                <a href="">注册</a>
                <a href="">收藏本站</a>
            </div>
        </div>
        
    </div>
    <div class="pg-body">
        <div class="conten">内容信息</div>
    </div>
View Code 
<!-- 单独使用position: relative 没有什么效果，absolute 跟 relative 配合使用获取相对位置 -->
<div style="position: relative;width: 400px;height: 200px;margin:auto; border: 3px solid red;">
    <div style="position: absolute;left: 0;bottom: 0;width: 50px;height: 50px;background-color: green;"></div>
</div>
<div style="position: relative;width: 400px;height: 200px;margin:auto; border: 3px solid red;">
    <div style="position: absolute;left: 50%;top: 50%;width: 50px;height: 50px;margin-left: -25px;margin-top:-25px;  background-color: green;"></div>
</div>
View Code

8.4 z-index

<body style="margin: 0 auto;">
    <style type="text/css">
        .bd{
            background-color: green;
            height: 1800px;
        }
        .bg{
            background-color: gray;
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            /* 透明度0~1 */
            opacity: 0.5;
            /* 分层，数字越大越靠前显示 */
            z-index: 1;    
            /* display: none; */
        }
        .ck{
            background-color: white;
            border: 1px solid red;
            height: 300px;
            width: 500px;
            z-index: 2;
            position: fixed;
            top: 50%;
            left: 50%;
            margin-top: -150px;
            margin-left: -250px; 
        }
    </style>
    <div class="bd"></div>
    <div class="bg"></div>
    <div class="ck">
        用户名：<input type="text" name="user" value="username" style="margin: 20px;"><br>
        密&nbsp;&nbsp;&nbsp;码:<input type="passwd" name="passwd" style="margin: 20px;">
    </div>
</body>
标签
margin
css
header
background
border
list-style
position
css样式
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!