什么是css

文件格式

./ ：代表文件所在的目录（可以省略不写）

../ ：代表文件所在的父级目录

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

快速入门

每一个申明，最后都以分号结尾
<style>
    /*选择器 {
        声明1；
        声明2；
        声明3；
    }*/
</style>

CSS的优势

内容和表现分离
网页结构表现统一，可以实现复用
样式十分丰富
建议使用独立的html的css文件
利用seo,容易被搜索引擎收录

css的三种导入方式

优先级：就近原则，谁离元素更近采用该方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--内部样式-->
    <style>
        h1{
            color:blue;
        }
    </style>
    <!--外部样式-->
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
<!--行内样式，在标签元素中，编写一个style属性-->
<h1 style="color:red;">我的标题</h1>
</body>
</html>

选择器

作用：选择页面上一个或者一类元素

基本选择器

优先级： id > class > 标签

标签选择器

/*标签选择器 改变页面中所有标签的样式*/
h1 {
    color: rgba(96, 179, 65, 0.67);
}
p {
    font-size:80px;
}

类选择器 class

/*类选择器的样式  .class 的名称{}
好处：可以多个标签归类，是同一个class ,可以复用
*/
.hello{
    color: #cf98cc;
}

id选择器

/*id选择器
#id{}
id 必须保证全局唯一
 */
#one {
    color:blue;
}

层次选择器

0、例子

<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
</ul>
</body>

1、后代选择器在某个元素后面的所有

/*
后代选择器
*/
body p {
background: orange;
}

2、子选择器在某元素后面的一代

body>p{
    background: orange;
}

3、相邻兄弟选择器同辈只有一个向下

.active +p{
    background: orange;
}

4、通用选择器当前选中元素的向下的所有兄弟元素

.active~p{
    background: orange;
}

结构伪类选择器

/*ul的第一个选择子元素*/
ul li:first-child{
    background: orange;
}
/*!*ul的最后一个选择子元素*!*/
ul li:last-child{
    background: orange;
}

属性选择器（常用）

语法

标签[]{}

=   绝对等于
*=  包含等于
^= 以这个开头
$=   以这个结尾

<!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: 20px;
            background: yellow;
            text-align: center;
            color: gray;
            /*去a下划线*/
            text-decoration: none;
            /*外边距*/
            margin-right: 5px;
            /*粗体 字体大小/字体行高(和高度相同就是居中) 字体*/
            /*font:bold 20px/50px Arial;*/
            /*直接设置行高=高度就是居中*/
            line-height: 50px;
        }

        .demo a:hover {
            background: blue;
        }
        /*a[id]{*/
        /*background:aquamarine;*/
        /*}*/
        /*a[id=first]{*/
        /*background: beige;*/
        /*}*/
        /*class中含有link的元素*/
        /*a[class*="links"]{*/
        /*background: brown;*/
        /*}*/
        /*a[href^=http] {*/
            /*background: #cf98cc;*/
        /*}*/
        a[href$=tp]{
            background:white ;
        }
    </style>
</head>
<body>
<p class="demo">
    <a href="https://" class="links item first" id="first">1</a>
    <a href="g" class="links item active" id="second">2</a>
    <a href="dsafasdfatp" class="link item">3</a>
    <a href="http">4</a>
    <a href="">5</a>
    <a href="">6</a>
    <a href="">7</a>
</p>
</body>
</html>

美化网页元素

span

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #title{
            font-size:100px;
        }
    </style>
</head>
<body>
欢迎学习<span id="title">java</span>
</body>
</html>

字体的设置

/*粗体 字体大小/字体行高(和高度相同就是居中) 字体*/
font:bold 20px/50px "Arial";

font-family:字体

font-size：字体大小

font-weight：字体粗细

color:字体颜色

文本样式

1、颜色
	单词
	rgb 0-f #000000
	rgba(0,255,255,3)
2、text-align:center 水平居中
3、text-indent:2em 首行缩进
4、line-height:300px;行高等于高度height,垂直居中
5、a标签是下划线 text-decoration: none;

行高的延伸

什么是行高

上间距+文字高+下间距= line-height = 边框高

上间距 = 下间距（我猜浏览器计算时候应该是（line-height - 文字高）/ 2 计算上下间距的）

超链接伪类

/*鼠标悬浮的颜色*/
a:hover {
    color:orange;
    font-size:30px;
}
/*鼠标按住未释放的颜色*/
a:active{
    color:green;
}

背景

背景颜色 background

背景图片

/*默认 全部平铺*/
background-image:url("http://img3m3.ddimg.cn/6/34/28532103-1_w_6.jpg");
background-repeat: no-repeat;
图片url 图片位置 平铺方式
在F12可以选中700px 按上下的箭头就可以加减数字
background: url("../images/jiantou.png") 700px -5px no-repeat ;

渐变色

https://www.grabient.com/

列表小圆点

/*处理圆点*/
list-style: none;

盒子模型

什么是盒子模型

内外边距

水平居中的区别

text-align: center;//文本居中，也可以是input
margin: 0 auto;//如果放在div里面 就是div居中,需要设置宽度
0表示上下 auto表示左右
body的宽度是无限的，所以需要div设置宽度来限制一下
#form>div {
            margin: 0 auto;
            width:270px;
            background: red;
            text-align: center;
        }

margin:外边距

padding:内边距

边框

border:边框

border:1px solid red;

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*初始化 */
        body a ul li {
            /*外边距*/
            margin: 0;
            /*内边距*/
            padding: 0;
            text-decoration: none;
            list-style: none;
        }
        #login {
            border: 1px solid red;
            width: 290px;
        }
        h3 {
            text-align: center;
            background: yellow;
            margin: 5px;
        }
        #form>div {
            margin: 5px;
            text-align: center;
        }
    </style>

</head>
<body>
<div id="login">
    <h3>登录</h3>
    <form action="" id="form">
        <div>
            <label for="username">用户名：</label>
            <input type="text" id="username">
        </div>
        <div>
            <label for="password">密&nbsp&nbsp码：</label>
            <input type="text" id="password">
        </div>
        <div>
            <input type="submit">
        </div>
    </form>
</div>
</body>
</html>

4.4圆角边框

左上 友上 右下 左下 顺时针
border-radius: 100px;
border-radius: 1px 2px 3px 4px;

/*圆圈*/
div{
    width:100px;
    height:100px;
    border:10px solid red;
    border-radius: 100px;
}
/*半圆*/
div {
    width: 100px;
    height: 50px;
    border: 10px solid red;
    border-radius: 100px 100px 0px 0px;
}

4.5盒子阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .one{
            margin: 0 auto;
            width: 100px;
            height: 100px;
        }
        img{
            width: 80px;
            height: 80px;
            box-shadow: 1px 10px 100px yellow;
        }
    </style>
</head>
<body>
<div class="one">
    <img src="images/head.jpg" alt="">
</div>
</body>
</html>

浮动

块级元素：独占一行

h1-h6 p div 列表 ...

行级元素不独占

span  a  img  ...

行级元素可以被包含在快级元素中。反之，不可以

display

display:block 块元素

inline 行内元素

inline-block 保持块元素的特性，但是可以在一行

none 消失

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width:100px;
            height:100px;
            border:1px solid red;
            display: inline;
        }
        span{
            width:100px;
            height:100px;
            border:1px solid red;
            display: inline-block;
        }
    </style>
</head>
<body>
<div>div块元素</div>
<span>span行内元素</span>
</body>
</html>

float

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img{
            width: 80px;
            height: 80px;
            box-shadow: 1px 10px 100px yellow;
        }
        .right1{
            float:right;
        }
        .right2{
            float:right;
        }
    </style>
</head>
<body>
<img src="images/head.jpg" alt="">
<img src="images/head.jpg" alt=""class="right2">
<img src="images/head.jpg" alt=""class="right1">
</body>
</html>

clear:both 变成块元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img{
            width: 80px;
            height: 80px;
            box-shadow: 1px 10px 100px yellow;
        }
        .right1{
            float:right;
            clear:both;
        }
        .right2{
            float:right;
            clear: both;
        }
    </style>
</head>
<body>
<img src="images/head.jpg" alt="">
<img src="images/head.jpg" alt=""class="right2">
<img src="images/head.jpg" alt=""class="right1">
</body>
</html>

overflow: scroll;

超出时出现滚动条

5.1解决父级边框塌陷的问题

问题：元素如果浮动，父级会塌陷

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #content{
            /*width:400px;*/
            /*height:150px;*/
            /*overflow: scroll;*/
            border:1px solid red;
        }
        img{
            float: left;
        }
    </style>
</head>
<body>
<div id="content">
    <img src="images/head.jpg" alt="">
    <p>
        指一个人发出的笑声，高兴欢乐时的状态，抒发快乐的心情，表现一个人很开心的状态。也指人通常用来开玩笑。人的一种笑声，表示高兴、开心、愉悦。
    </p>
</div>

</body>
</html>

方法一给content加一个overflow: scroll;出现滚动条

方法二父类添加一个伪类 :after 解决

解释after
在每个 <p> 元素的内容之后插入新内容：
p:after
{ 
content:"台词：";
}

#content :after{
    content: "";
    clear: both;
    display: block;
}

定位

相对定位 relative

相对于自己原来的位置进行偏移

可以有上下左右
position:relative;
top:-90px;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #content{
            width:300px;
            height:500px;
            boder:1px solid red;
        }
        #b1{
            margin: 20px;
            height: 90px;
            background: #6284FF;

        }
        #b2{
            margin: 20px;
            height: 90px;
            background: yellow;
            position:relative;
            top:-90px;
        }
        #b3{
            margin: 20px;
            height: 90px;
            background: black;
        }
    </style>
</head>

<body>
<div id="content">
    <div id="b1"></div>
    <div id="b2"></div>
    <div id="b3"></div>

</div>
</body>
</html>

练习注意宽度和高度所属

#content{
    width: 300px;
    height: 300px;
    border:1px solid red;
    padding:10px;
}

绝对定位 absolute

定位

没有父级元素，相对body定位

父级元素为relative ，则相对于父级元素定位

固定定位 fix

定死的。不管网页怎么变一直在那个位置

z-index

z-index 默认是0，最高无限。越大在越前面

/*在用z-index的时候，该元素没有定位（非static）*/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .content{
            width: 300px;
            height: 400px;
            border: 1px solid red;
            position: relative;
        }
        img{
            width: 200px;
            height: 100px;
            /*z-index: 10;*/
        }
        span{
            z-index: -1;
            position: absolute;
            right: 180px;
        }
    </style>
</head>
<body>
<div class="content">
    <img src="images/head.jpg" alt="">
    <span>123</span>
</div>

</body>
</html>

2 初识CSS

什么是css

文件格式

快速入门

css的三种导入方式

选择器

基本选择器

层次选择器

结构伪类选择器

属性选择器（常用）

美化网页元素

span

字体的设置

文本样式

超链接伪类

背景

渐变色

列表小圆点

盒子模型

什么是盒子模型

内外边距

边框

4.4圆角边框

4.5盒子阴影

浮动

display

float

5.1解决父级边框塌陷的问题

定位

相对定位 relative

绝对定位 absolute

固定定位 fix

z-index

猜你喜欢

2 初识CSS

什么是css

文件格式

快速入门

css的三种导入方式

选择器

基本选择器

层次选择器

结构伪类选择器

属性选择器（常用）

美化网页元素

span

字体的设置

文本样式

超链接 伪类

背景

渐变色

列表小圆点

盒子模型

什么是盒子模型

内外边距

边框

4.4圆角边框

4.5盒子阴影

浮动

display

float

5.1解决父级边框塌陷的问题

定位

相对定位 relative

绝对定位 absolute

固定定位 fix

z-index

猜你喜欢

超链接伪类