IMUT-LF

CSS-学习笔记

CSS

一、三种CSS导入方式

  • 直接在标签内部写：style="..."（多个样式以 ；间隔）

<h2 style="color: green">我是标题2</h2>

  • 在head区域中写style代码块

<style type="text/css">
    h3{
          color: pink;
      }
</style>

  • 单独写css文件，在指定的html文件中以link语句导入

    link：

    rel

    href：css文件地址

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

 

二、CSS选择器

1、CSS三种基本选择器

  • 标签选择器：以标签名为名

/*标签选择器
所有标签同处理
标签名{}
*/
h1{
     color: red;
  }

  • 类选择器：class类名方式

/*类选择器
同class名可以复用
.class名{}
*/
.cls{
        color: blue;
        font-size: 50px;
    }

  • id选择器：id名方式（全局唯一）

/*id选择器
全局唯一
#id名{}
*/
#ID{
       color: green;
       font-size: 70px;
       font-family: 华文彩云;
   }

 

2、层次选择器

  • 后代选择器：

/*后代选择器
后代中所有都变
*/
body h3{
    color: pink;
    font-size: 50px;
}

  • 子选择器：

/*子选择器
后代中只有一代变
*/
body>p{
   background: brown;
}

  • 相邻兄弟选择器：

/*相邻兄弟选择器
当前选中元素的向下一个兄弟元素变
*/
.active + p{
      background: yellow;
}

  • 通用选择器：

/*通用选择器
当前选中元素的向下所有兄弟元素都变
*/
.active~p{
     background: aqua;
}

 

3、结构伪类选择器

伪类： 条件

/*ul的第一个子元素*/
ul li:first-child{
    background: aqua;
}
/*ul的最后一个子元素*/
ul li:last-child{
    background: blue;
}
/*选择当前元素的父级元素，选中父级元素的第n个子元素，并且是当前元素才生效
按顺序，如果前面有别的标签，则会出现差异
*/
p:nth-child(2){
    background: cadetblue;
}
/*选择父元素中第n个类型为p的元素
按类型		括号中可以是数字、关键字（odd-奇数、even-偶数）
*/
p:nth-of-type(2){
    background: yellow;
}

image-20200419181551539

 

4、属性选择器（常用）

格式：名称 [ ] { }

[ ] 中可以写：属性名 / 属性名=值（可以用正则）

其中

  • = 绝对等于

  • *= 包含该元素

  • ^= 以该元素开头

  • $= 以该元素结尾

测试：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style>
        .demo a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            background: blue;
            color: white;
            border-radius: 10px;
            text-align: center;
            text-decoration: none;
            margin-right: 5px;
            font:bold 20px/50px Arial;
        }
        /*存在id属性的元素*/
        /*a[id]{*/
        /*    background: yellow;*/
        /*}*/
        /*id名为first的元素*/
        /*a[id=first]{*/
        /*    background: green;*/
        /*}*/
        /*值为指定href的元素*/
        /*a[href="https://www.sohu.com/"]{*/
        /*    background: aqua;*/
        /*}*/
        /*class中有links的元素*/
        /*a[class*="links"]{*/
        /*    background: darkorchid;*/
        /*}*/
        /*选中href属性以https开头的*/
        /*a[href^=https]{*/
        /*    background: pink;*/
        /*}*/
        /*选中href属性以pdf结尾的*/
        a[href$=pdf]{
            background: red;
        }
    </style>
</head>
<body>
<p class="demo">
    <a href="https://www.baidu.com" class="links item first" id="first">1</a>
    <a href="https://www.sohu.com/" class="links item active" target="_blank" title="2">2</a>
    <a href="Demo01.html" class="links item">3</a>
    <a href="123.png" class="links item">4</a>
    <a href="123.jpg" class="links item">5</a>
    <a href="abc.txt" 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">10</a>
</p>
</body>
</html>

效果：

image-20200419205127649

 

三、美化网页元素

3.1、span标签

span标签：重点要突出的字，使用span套起来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Span标签</title>
    <style>
        #test{
            font-size: 50px;
        }
    </style>
</head>
<body>
欢迎学习<span id="test">Java</span>
</body>
</html>

3.2、字体样式

font-family：字体样式 可以同时为中文英文指定字体，中间用 ‘ ， ’ 隔开

font-size：字体大小

font-weight：字体粗细

color：字体颜色

可以直接一次指定：font：字体风格(斜体oblique等) 粗细 大小/行高 字体；

3.3、文本样式

1、颜色：color

单词

RGB：0~F（黑色：#000000，白色：#FFFFFF，红色：#FF0000，绿色：00FF

00，蓝色：0000FF）

RGBA(A为透明度)：A 0~1

如：color：rgba（0，255，255，0.5）

2、对齐方式

text-align：排版 left / center / right

3、首行缩进

text-indent：可以用em表示，1em等于一个字的长度

4、行高

line-height

行高和块的高度一致，就可以上下居中

5、装饰

text-decoration：underline（下） / line-through（中） / overline（上）/ none（没有）

文本图片水平对齐~ 参照物：a，b

如：

<style>
	img,span{
    	vertical-align:middle;
	}
</style>

image-20200419214906558

3.4、超链接伪类

默认的样式：a

鼠标悬浮的样式：a：hover（常用）

鼠标按住未释放的状态：a：active

未访问时的状态：a：link

已访问的状态：a：visited

 

阴影：text-shadow：阴影颜色 水平偏移 垂直偏移 阴影半径

#price{
    text-shadow: cyan 10px 10px 5px;
}

3.5、列表

list-style：可以选择列表中每一个li前面的标识

none：没有

circle：空心圆

decimal：数字

square：正方形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表css</title>
    <link rel="stylesheet" href="../../style/style01.css">
</head>
<body>
<div id="nav">
    <h2 class="tit">全部商品分类</h2>
    <ul>
        <li><a href="#">图书</a>&nbsp;&nbsp;<a href="#">音像</a>&nbsp;&nbsp;<a href="#">数字商品</a></li>
        <li><a href="#">家用电器</a>&nbsp;&nbsp;<a href="#">手机</a>&nbsp;&nbsp;<a href="#">数码</a></li>
        <li><a href="#">电脑</a>&nbsp;&nbsp;<a href="#">办公</a></li>
        <li><a href="#">家居</a>&nbsp;&nbsp;<a href="#">家装</a>&nbsp;&nbsp;<a href="#">厨具</a></li>
        <li><a href="#">服饰鞋帽</a>&nbsp;&nbsp;<a href="#">个护化妆</a></li>
        <li><a href="#">礼品箱包</a>&nbsp;&nbsp;<a href="#">钟表</a>&nbsp;&nbsp;<a href="#">珠宝</a></li>
        <li><a href="#">食品饮料</a>&nbsp;&nbsp;<a href="#">保健食品</a></li>
        <li><a href="#">彩票</a>&nbsp;&nbsp;<a href="#">旅行</a>&nbsp;&nbsp;<a href="#">充值</a>&nbsp;&nbsp;<a href="#">票务</a></li>
    </ul>
</div>
</body>
</html>
#nav{
    width: 300px;
    background: gray;
}
.tit{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 30px;
    background: #ff830d;
}
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
}
/*ul{*/
/*    background: gray;*/
/*}*/
a{
    text-decoration: none;
    font-size: 14px;
    color: black;
}
a:hover{
    color: orange;
    text-decoration: underline;
}

image-20200420085225230

3.6、背景

background 和 background-color都可以用来设置背景颜色，谁最后设置谁生效

background： 颜色 图片（url） 图片相对位置（水平，竖直） 图片平铺方式

border：边框粗细 边框线样式 边框颜色；

边框线样式：实线--solid 虚线--dashed

背景图片：background-image：url（图片路径）

默认全部平铺（repeat）

图片平铺方式：background-repeat

repeat-x：水平方向平铺

repeat-y：竖直方向平铺

repeat：水平竖直都平铺

no-repeat：不平铺（只有一个图片）

位置设定：background-position

水平、竖直

<style>
div{
    width: 1000px;
    height: 700px;
    background-color: cyan;
    background-image: url("../../pic/pic_05.jpg");
    border: 1px solid red;
}
#div1{
    background-repeat: repeat-x;
}
#div2{
    background-repeat: repeat-y;
}
#div3{
    background-repeat: no-repeat;
}
</style>

渐变

可以直接从网站找：grabient

background-color: #FFFFFF;
background-image: linear-gradient(135deg, #FFFFFF 0%, #6284FF 50%, #FF0000 100%);

 

四、盒子模型

4.1、什么是盒子模型

image-20200420160211097

margin：外边距

padding：内边距

border：边框

4.2、边框

1、边框的粗细

2、边框的样式

3、边框的颜色

image-20200420173956688

4.3、内外边距及div居中

margin妙用：margin：0 auto；可以将该元素居中（上下外边距为0，左右自动对齐）

前提：外边是块元素，且块元素有固定的宽度

margin：X X X X；分别指定上下左右

margin：X X X；分别指定上，左右，下

margin：X X；分别指定上下、左右

margin：X；上下左右都为X

padding操作方式同margin

 

盒子的计算方式：（元素到底有多大）

margin + padding + border + 内容宽度

4.4、圆角边框及阴影

border-radius：左上、右上、右下、左下（顺时针方向）

100px就为圆了（头像设计原理）

阴影：box-shadow：颜色 水平偏移 垂直偏移 模糊半径；

4.5、标准文档流

标准文档流

image-20200420220504723

块级元素：独占一行

h1~h6		p		div		列表...

内联元素：不独占一行

span		a		img		strong...

行内元素可以被包含在块级元素中；反之，则不可以

 

display：

block：块元素

inline：行内元素

inline-block：既是行内元素又是块元素

display也是一种实现行内元素排列的方式，但是很多情况用 float（因为display还是在文档流内，而float是不在文档流内的独立部分）

 

float：浮动。不在原有文档流中排版，而是浮动起来。

clear：both：清除浮动。既有浮动的效果又有块元素的效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <link rel="stylesheet" href="../../style/style02.css">
</head>
<body>
<div id="father">
    <div class="layer01"><img src="../../pic/pic_04.jpg" alt="pic_04.jpg"></div>
    <div class="layer02"><img src="../../pic/pic_03.jpg" alt="pic_03.jpg"></div>
    <div class="layer03"><img src="../../pic/pic_02.jpg" alt="pic_02.jpg"></div>
    <div class="layer04">
        浮动的盒子可以向左浮动，也可以向右浮动，
    </div>
</div>
</body>
</html>
div{
    margin: 10px;
    padding: 5px;
}
#father{
    border: 1px solid blue;
}
.layer01{
    border: 1px dashed red;
    display: inline-block;
    float: right;
}
.layer02{
    border: 1px dashed yellow;
    display: inline-block;
    float: right;
}
.layer03{
    border: 1px dashed green;
    display: inline-block;
    float: right;
}
.layer04{
    border: 1px dashed pink;
    display: inline-block;
    font-size: 12px;
    line-height: 24px;
    float: right;
    clear: both;
}

image-20200421092311961

4.6、父级边框塌陷的问题

clear：

clear：right；右侧不允许有浮动元素

clear：left；左侧不允许有浮动元素

clear：both：两侧不允许有浮动元素

clear：none：允许浮动

 

解决方案：（让浮动元素依然在父级元素内）

1、增加父级元素的高度（不建议）

#father{
    border: 1px solid blue;
    height: 800px;
}

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

<div class="clear"></div>

.clear{

clear: both;

margin: 0;

padding: 0;

}

3、在父级元素中增加一个overflow属性

#father{
    border: 1px solid blue;
    overflow: hidden;
}

4、在父类中添加一个伪类：after （常用）

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

五、定位

5.1、相对定位

相对于原来的位置，进行指定的偏移

注：相对定位的话，它仍然在标准文档流中！原来的位置会被保留

position：relative

top、bottom、left、right

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相对定位</title>
    <style>
        div{
            margin: 10px;
            padding: 10px;
            width: 300px;
            height: 300px;
        }
        #father{
            border: 2px solid red;
            margin: 0 auto;
        }
        a{
            display: block;
            width: 100px;
            height: 100px;
            background-color: pink;
            text-decoration: none;
            color: white;
            text-align: center;
            line-height: 100px;
        }
        a:hover{
            background-color: blue;
            color: white;
        }
        #two,#four{
            position: relative;
            left: 200px;
            top: -100px;
        }
        #five{
            position: relative;
            left: 100px;
            top: -300px;
        }
    </style>
</head>
<body>
<div id="father">
    <a href="#" id="one">链接1</a>
    <a href="#" id="two">链接2</a>
    <a href="#" id="three">链接3</a>
    <a href="#" id="four">链接4</a>
    <a href="#" id="five">链接5</a>
</div>
</body>
</html>

image-20200421135130120

5.2、绝对定位

定位：基于XXX定位，上下左右

1、没有父级元素定位的前提下，相对于浏览器定位

2、假设父级元素存在定位，我们通常会相对于父级元素偏移

posted @ 2021-01-15 21:42  IMUT_LF  阅读(108)  评论(0)    收藏  举报

IMUT-LF