CSS学习小结

一、CSS简介

1.CSS:cascading style sheet,层叠级联样式表。涉及字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动等设计。样式通常保存在外部的 .css 文件中,只需编辑简单的 CSS 文档即可改变所有页面的布局和外观。

2.发展史

  • css1.0

  • css2.0:div css,html与css结构分离,SEO

  • css2.1:浮动、定位

  • css3.0:圆角、边框、阴影、动画…… 浏览器兼容性

3.css导入方式

  • 行内样式

  • 内部样式

  • 外部样式

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--内部样式-->
    <style>
        h1{
            color: aqua;
        }
    </style>

    <link rel="stylesheet" href="css/style.css">

</head>
<body>

<!--行内样式:在标签中,编写style属性-->
<h1 style="color: red">标题</h1>

</body>
</html>

style.css

/*外部样式*/
h1{
    color: chartreuse;
}

/*优先级:采取就近原则,行内样式 \ 内部样式 \ 外部样式*/

二、CSS选择器

1.作用:选择页面上的某一个或者某一类元素

2.基本选择器

  • 标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*标签选择器会选择所有的该标签*/
        h1{
            color: #aa1133;
        }
        p{
            font-size: 80px;
        }
    </style>

</head>
<body>

<h1>二月</h1>
<h1>二月</h1>
<p>四日</p>

</body>
</html>
  • 类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*类选择器的格式 .class的名称{}*/
        .june{
            color: blueviolet;
        }
        .bw{
            color: chartreuse;
        }
    </style>

</head>
<body>

<h1 class="june">one</h1>
<h1 class="bw">two</h1>
<h1 class="june">three</h1>

</body>
</html>
  • id选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*id选择器的格式 #id名称{} id保证全局唯一*/
        #bw{
            color: blueviolet;
        }
        #june{
            color: chartreuse;
        }
        h1{
            color: darksalmon;
        }
    </style>

</head>
<body>

<h1 id="june">one</h1>
<h1 id="bw">two</h1>
<h1>three</h1>
<h1>four</h1>

</body>
</html>

3.高级选择器

  • 层次选择器:后代选择器、子选择器、相邻兄弟选择器、通用兄弟选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*后代选择器:某个元素之后*/
        ul p{
            background: #aa1133;
        }
        /*子选择器:只有后面一代*/
        body>p{
            background: chartreuse;
        }
        /*相邻兄弟选择器:相邻向下的一个元素*/
        .active p{
            background: coral;
        }
        /*通用兄弟选择器:当前元素向下的所有元素*/
        .active~p{
            background: blueviolet;
        }
    </style>
</head>
<body>

<p>p1</p>
<p class="active">p2</p>
<p>p3</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
</ul>
<p>p7</p>
<p>p8</p>

</body>
</html>
  • 结构伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--避免使用id、class选择器-->
    <style>
        /*ul的第一个子元素*/
        ul li:first-child{
            background: blueviolet;
        }
        /*ul的第一个子元素*/
        ul li:last-child{
            background: chartreuse;
        }
        /*选中P3:定位到父元素,选择当前第n个元素*/
        p:nth-of-type(3){
            background: red;
        }
    </style>

</head>
<body>

<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
</ul>

</body>
</html>
  • 属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .demo a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: blue;
            text-align: center;
            color: grey;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }
        /*存在id属性的元素 a[]{}*/
        a[id]{
            background: coral;
        }
        /*
        =绝对等于 *=通配,包含该元素
        ^=以该元素开头,$=以该元素结尾
        */
        a[class*="links"]{
            background: aqua;
        }
    </style>

</head>
<body>

<p class="demo">
    <a href="http://www.baidu.com" class="links item first" id="first">1</a>
    <a href="" class="links item active" target="_blank" title="text">2</a>
    <a href="images/123.html" class="links item">3</a>
    <a href="images/123.png" class="links item">4</a>
    <a href="images/123.jpg" class="links item">5</a>
    <a href="abc" class="links item">6</a>
    <a href="/a.pdf" class="links item">7</a>
    <a href="/abc.pdf" class="links item">8</a>
    <a href="abc.doc" class="links item">9</a>
    <a href="abcd.doc" class="links item last">10</a>
</p>

</body>
</html>

三、字体样式

1.span

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        #title1{
            font-size: 50px;
        }
    </style>

</head>
<body>

<!--span:重点要突出的字,用span包裹起来-->
欢迎学习 <span id="title1">Java</span>

</body>
</html>

2.字体样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    /*
    font-family:字体
    font-size:大小
    font-weight:粗细
    color:颜色
    */
    <style>
        body{
            font-family: 微软雅黑;
        }
        h1{
            font-size: 50px;
        }
        .p1{
            font-weight: bold;
            color: #678000;
        }
    </style>

</head>
<body>

<h1>内容简介</h1>
<p class="p1">故事写的是东京一位名叫岛村的舞蹈艺术研究家,三次前往雪国的温泉旅馆,与当地一位名叫驹子的艺妓、一位萍水相逢的少女叶子之间发生的感情纠葛:岛村是一个有着妻室儿女的中年男子,坐食遗产,无所事事,偶尔通过照片和文字资料研究、评论西洋舞蹈。他来到雪国的温泉旅馆,邂逅了艺妓驹子,并被她的清丽和单纯所吸引,甚至觉得她的“每个脚趾弯处都是很干净的”,后来又两度到雪国和驹子相会。</p>
<p>小说就是从岛村第二次来雪国开始的。驹子的三弦琴师傅的儿子行男患了肺结核,叶子陪同他从东京乘火车返回汤泽,正好坐在第二次去会驹子的岛村对面。岛村透过车窗欣赏黄昏的雪景,却看到映现在车窗上的美丽的叶子,不禁喜欢上了这个美少女。因而在他和驹子、叶子之间,构成了一种微妙的情感关系。小说最终以叶子的意外去世而告终。</p>

</body>
</html>

3.文本样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--
    text-align:排版,一般选居中
    text-indent:段落首行缩进
    height:块高
    line-height:行高
    当行高和块高一致,就能上下居中
    -->
    <style>
        h1{
            color: #aa1133;
            text-align: center;
        }
        .p1{
            text-indent: 2em;
        }
        .p2{
            background: #00ff45;
            height: 300px;
            line-height: 50px;
        }
        .l1{
            text-decoration: underline;
        }
        .l2{
            text-decoration: line-through;
        }
        .l3{
            text-decoration: overline;
        }
        /*a标签去除下划线*/
        a{
            text-decoration: none;
        }
    </style>

</head>
<body>

<p class="l1">123456789</p>
<p class="l2">123456789</p>
<p class="l3">123456789</p>

<h1>内容简介</h1>
<p class="p1">故事写的是东京一位名叫岛村的舞蹈艺术研究家,三次前往雪国的温泉旅馆,与当地一位名叫驹子的艺妓、一位萍水相逢的少女叶子之间发生的感情纠葛:岛村是一个有着妻室儿女的中年男子,坐食遗产,无所事事,偶尔通过照片和文字资料研究、评论西洋舞蹈。他来到雪国的温泉旅馆,邂逅了艺妓驹子,并被她的清丽和单纯所吸引,甚至觉得她的“每个脚趾弯处都是很干净的”,后来又两度到雪国和驹子相会。</p>
<p class="p2">小说就是从岛村第二次来雪国开始的。驹子的三弦琴师傅的儿子行男患了肺结核,叶子陪同他从东京乘火车返回汤泽,正好坐在第二次去会驹子的岛村对面。岛村透过车窗欣赏黄昏的雪景,却看到映现在车窗上的美丽的叶子,不禁喜欢上了这个美少女。因而在他和驹子、叶子之间,构成了一种微妙的情感关系。小说最终以叶子的意外去世而告终。</p>

<a href="http://www.baidu.com"></a>

</body>
</html>

四、列表样式

  • 无序列表 ul - 列表项标记用特殊图形(如小黑点、小方框等)

  • 有序列表 ol - 列表项的标记有数字或字母

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表样式</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="nav">
    <h1 class="title">全部商品分类</h1>
    <ul>
        <li><a href="#">图书</a>  <a href="#">音像</a>  <a href="#">数字商品</a></li>
        <li><a href="#">家用电器</a>  <a href="#">手机</a>  <a href="#">数码</a></li>
        <li><a href="#">电脑</a>  <a href="#">办公</a></li>
        <li><a href="#">家居</a>  <a href="#">家装</a>  <a href="#">厨具</a></li>
        <li><a href="#">服饰鞋帽</a>  <a href="#">个护化妆</a></li>
        <li><a href="#">礼品箱包</a>  <a href="#">钟表</a>  <a href="#">珠宝</a></li>
        <li><a href="#">食品饮料</a>  <a href="#">保健食品</a></li>
        <li><a href="#">彩票</a>  <a href="#">旅行</a>  <a href="#">充值</a>  <a href="#">票务</a></li>
    </ul>
</div>

</body>
</html>

style.css

#nav{
    width: 300px;
    background: #a0a0a0;
}
.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
    background: #ff0000;
}
ul{
    background: #a0a0a0;
}
/*
list-style:
    none:去掉圆点
    circle:空心圆
    decimal:数字
    square:正方形
*/
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
}
a{
    text-decoration: none;
    font-size: 14px;
    color:#000000;
}
a.hover{
    color: orange;
    text-decoration: underline;
}

五、定位

  • 默认情况

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid #666666;
            padding: 0;
        }
        #first{
            background-color: #ff0055;
            border: 1px solid #ff0000;
        }
        #second{
            background-color: #ff9955;
            border: 1px solid #ff990e;
        }
        #third{
            background-color: #f4fc55;
            border: 1px solid #f4fc36;
        }
    </style>

</head>
<body>

<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>

</body>
</html>
  • 相对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--相对定位:相对于自己原来的位置进行偏移
            移动之前的位置仍会保留下来
    -->
    <style>
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid #666666;
            padding: 0;
        }
        #first{
            background-color: #ff0055;
            border: 1px solid #ff0000;
            position: relative;/*相对定位*/
            top: -20px;
            left: 20px;
        }
        #second{
            background-color: #ff9955;
            border: 1px solid #ff990e;
        }
        #third{
            background-color: #f4fc55;
            border: 1px solid #f4fc36;
            position: relative;/*相对定位*/
            right: 20px;
            bottom: -20px;
        }
    </style>

</head>
<body>

<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>

</body>
</html>
  • 绝对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--绝对定位:移动之前的位置不会被保留
            1.没有父级元素的情况下,相对于浏览器行为
            2.假设父级元素存在定位,则相对于父级元素进行偏移
            3.在父级元素范围内移动
    -->
    <style>
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid #666666;
            padding: 0;
        }
        #first{
            background-color: #ff0055;
            border: 1px solid #ff0000;
        }
        #second{
            background-color: #ff9955;
            border: 1px solid #ff990e;
            position: absolute;
        }
        #third{
            background-color: #f4fc55;
            border: 1px solid #f4fc36;
        }
    </style>

</head>
<body>

<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>

</body>
</html>
  • 固定定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        body{
            height: 1000px;
        }
        div:nth-of-type(1){ /*绝对定位:相对于浏览器*/
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        div:nth-of-type(2){ /*固定定位*/
            width: 50px;
            height: 50px;
            background-color: yellow;
            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>

</head>
<body>

<div>div1</div>
<div>div2</div>

</body>
</html>
(0)

相关推荐

  • 声乐学习小结

    [学习小结] 到了五一劳动节,也应该给数月的声乐学习的劳动成果,做一个小结了. 目前为止,交了三次作业,一次点评. 1️⃣.第一次作业,小刘老师提出声音靠后.

  • 737NG 后缘襟翼备用放出学习小结

    首先:要备用放出后缘襟翼,后缘襟翼必须处于收上或"未完全放出"状态.而S246限位电门便是用来"监视"后缘襟翼是否处于上述状态的"监视员". ...

  • 蒙特卡洛马尔可夫链学习小结

    目录 采样为什么是困难的(the curse of high dimensionality) 基于概率分布的采样Inverse Transform Sampling 接受-拒绝采样Rejection ...

  • devops学习小结

    DevOps还是devops有很多争论,在国内的圈子我们看到的DevOps往往是大写的两个技能集合,而在体系内一般都用devops来说明一种思维方式或者一种工作方式. devops知识体系 由敏捷管理 ...

  • 小白学习小结

    ​老师给你做一个小白营课程的总结

  • 每周英语学习小结(July1–July7,2021)

    每周英语学习小结(July1–July7,2021)

  • css学习24:创建布局

    css学习24:创建布局

  • Monthly summary--七月份英语学习小结

    July31,2021              Saturday             Cloudy Monthly summary Today is July 31st. Half the su ...

  • CSS学习笔记

    三种嵌套格式: 1.内联样式 行内样式: - 在标签内部通过style属性来设置元素的样式 - 问题: 使用内联样式,样式只能对一个标签生效, 如果希望影响到多个元素必须在每一个元素中都复制一遍 并且 ...