css笔记

最新推荐文章于 2024-06-13 11:45:00 发布

笑---

最新推荐文章于 2024-06-13 11:45:00 发布

阅读量182

点赞数

本文链接：https://blog.csdn.net/XINGXINGR/article/details/103855405

版权

一什么是CSS

CSS全称Cascading Style Sheet 层叠级联样式表
Css表现：美化页面
字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动….

创建格式：

在这里插入图片描述

快速编写CSS

第一种创建格式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        <!--规范，<style> 可以编写css的代码 ，每一个声明，最好使用分号结尾
    语法：
        选择器 {
            声明1;
            声明2;
            声明3;
        }
  
    -->
        h1{
            color: rebeccapurple;
        }
    </style>
</head>
<body>
<h1>
    我是一级标题
</h1>
</body>
</html>

第二种创建格式（推荐）

CSS优势

1.网页内容与网页样式分离
2.网络结构表现统一，可以实现复用
3.样式丰富
4.独立使用HTML文件和CSS文件
5.利用 SEO，容易被搜索引擎收录

CSS三种导入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1{
            color: rebeccapurple;
        }
    </style>
    <link rel="stylesheet" href="css/CssTest1.css">
</head>
<body>
<h1 style="color: rebeccapurple">
    我是一级标题
</h1>
</body>
</html>

二 CSS选择器

1基本选择器

1.通过指定的标签进行选择

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1{
            color: rebeccapurple;
        }
        /*会选择body里面的所有这个标签的元素*/
    </style>
    <link rel="stylesheet" href="css/CssTest1.css">
</head>
<body>
<h1 style="color: rebeccapurple">
    我是一级标题
</h1>
<h1>我也是一级标题</h1>
<p>我是一个段</p>
</body>
</html>

2.通过指定的类选择clss进行选择 .类名{}
通过
.class的名称{} 当是同一个CLASS名称即可服用
3.id选择器
全局唯一通过#id选择器名称{}
不遵循就近原则，固定的
且id选择器》class选择器>标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .a{
            color: rebeccapurple;
        }
        .b{
            color: aqua;
        }
        #aa{
            color: red;
        }
        /*会选择body里面的所有这个标签的元素*/
    </style>

</head>
<body>
<h1 id="aa">
    我是一级标题
</h1>
<h1 class="a">我也是一级标题</h1>
<p class="b">我是一个段</p>
</body>
</html>

2层次选择器

1.后代选择器
某个元素的后代所有的样式都会改变
2子代选择器
父代后面的子代元素都会被选中
3.相邻兄弟选择器
某个元素下面相邻的一个元素会被选中改变
4相邻通用选择器
某个元素下面的所有元素都会被选中

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


    /*后代选择器  某个元素的后面所有子代都会被选中*
    ul p{
        background: red;
    } */
    /*子选择器   父代后面的子代元素都会被选中*/
    li>p{
        background: red;
    }
        /*相邻兄弟选择器   选中元素相邻向下的一个元素被选中*/
     /*.a+p{
         background: red;
      }*/
    /*相邻通用选择器选中的元素向下所有的兄弟元素都被选中*/
    /*.a~p{
      background: red;
    }*/
    </style>
</head>
<body>
<p>p1</p>
<p class="a">p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
<p>p6</p>
<ul>
   
    <li><p>
        p4
    </p></li>
    <li><p>p5</p></li>
    <li><p>p6</p></li>
</ul>
</body>
</html>

3结构伪类选择器

ul li:first-child{}选择ul第一个子元素
ul li:last-child{}选择ul最后一个子元素
类型:nth-child(){}定位父元素，选择父元素中的按顺序的第几个，并且相同类型时才生效顺序有关
类型:nth-of-type(){}定位到父元素，选择父元素中当前元素类型的第几个类型有关

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
 /*    ul li:first-child{
         background: red;  代表选中ul第一个子元素
     }
     ul li:last-child{
         background: aqua;  代表选中ul最后一个子元素
     }*/
     p:nth-child(2){
         /* 定位到父元素，选择父元素中的第二个，并且要求是相同元素才生效*/
         background: rebeccapurple;
     }
        p:nth-of-type(2){
            /* 选中父元素下的元素类型中的第二个*/
            background: red;
        }

    </style>
</head>
<body>
<h1>标题</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>l1</li>
    <li>l2</li>
    <li>l3</li>
</ul>
</body>
</html>

4属性选择器（常用重点）

属性名，属性名 = 属性值（正则）
= 绝对等于
*= 包含这个元素
^= 以这个开头
$= 以这个结尾

<!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: #2700ff;
            text-align: center;
            color: gainsboro;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }

        /* 属性名， 属性名 = 属性值（正则）
        = 绝对等于
        *= 包含这个元素
        ^= 以这个开头
        $= 以这个结尾

        */
        /*存在id属性的元素        a[]{}*/
        /*a[id]{*/
            /*background: yellow;*/
        /*}*/
        /*id=first的元素*/
        /*a[id=first]{*/
            /*background: #63ff23;*/
        /*}*/

        /*class 中有 links的元素*/
        /*a[class*="links"]{*/
            /*background: yellow;*/
        /*}*/

        /*!*选中href中以http开头的元素*!*/
        /*a[href^=http]{*/
            /*background: yellow;*/
        /*}*/

        a[href$=jpg]{
            background: yellow;
        }

    </style>

</head>
<body>


<p class="demo">

    <a href="http://www.baidu.com" class="links item first" id="first">1</a>
    <a href="http://blog.kuangstudy.com" class="links item active" target="_blank" title="test">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字体样式

关键字用标签套起来然后加一些样式，没有意义是约定俗成的。
font-family: 字体
font-size：字体大小
font-weight: 字体粗细
color ：字体颜色
一般这样写font:字体风格字体粗细字体大小字体

2文本样式

1文本颜色
color:red单词表示
rgb 0-f
rgba A0-1 透明度
2对齐方式
text-align = center
3首行缩进
text-indent: 2em**
4行高
line-height：
行高和块的高度一致，就可以上下居中
5下划线
text-decoratioin:underlin;
text-decoratioin:none;去掉下划线
6、文本图片水平对齐：
A,B{ vertical-align:middle; }
A和B对齐，要有参照物

3阴影

text-shadow: 阴影颜色，水平偏移，垂直偏移，阴影半径*/
#price{
    text-shadow: #3cc7f5 10px -10px 2px;
}

4超链接伪类

正常情况下，a,a:hover{}

 a:hover{
     background: yellow;
 }

当鼠标悬浮在标签上则会改变状态

a:active{
color:green;
}

当鼠标按下会为释放会改变状态

5列表

<style
ul li{
    height: 30px; 
    width: 50px;
    background: blue; 
    list-style: 
    none 去掉原点
    circle 空心圆
    decimal 数字
    square 正方形
}
</style>

6背景

background-image:url("地址");铺满
background-repeat:repeat-x;  X轴平铺
background-repeat:repeat-y;  Y轴平铺
background-repeat:no-repeat;图片默认大小
background-position: 250px 100px;
实际应用中背景的添加
background: red url("地址") 270px300px no-repeat
background:颜色 图片 图片位置 平铺方式

四盒子模型

在这里插入图片描述
外边框margin
boder边框
内边框padding
border:1px solid red; 边框语法边框宽度样式solid实线 dashed虚线颜色
margin:0 0 0 0;代表上下左右四个边距
外边距的妙用居中 margin:0 auto;
顺时针旋转
margin:0
margin:0 1px
margin:0 1px 2px 3px

盒子的计算方式：你这个元素到底多大？margin + border + padding + 内容宽度

圆角边框

<style>
div{
    width: 100px;
    height: 100px;
    border: 10px solid red;
    border-radius:  100px 100px 100px 100px;
}
</style>

顺序是左上右上右下左下

行内元素和块元素

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{width: 100px;
            height: 100px;
            border: 1px solid black;
        }    
        span{width: 100px;
            height: 100px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
<div>块元素</div>
<span>行内元素</span>
</body>
</html>

在这里插入图片描述块级元素：独占一行

h1~h6   p  div   列表...

行内元素：不独占一行

span  a  img  strong....

行内元素可以被包含在块级元素中，反之，则不可以~
display：
block 块元素
inline 行内元素
inline-block 是块元素，但是可以内联，在一行！
none 消失
这个也是一种实现行内元素排列的方式，但是我们很多情况都是用 float

浮动

float :right;
float:left;
float: top;
float: bottom;
但是存在父级边框塌陷。
在这里插入图片描述解决父级边框塌陷问题
1增加父级元素的高度

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

2在最后增加一个空的div标签，并且清除浮动

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

.clear{
    clear: both;
    margin: 0;
    padding: 0;
}

3overflow
在父级元素中增加一个overflow:hidden;
4在父类添加一个伪类:after
.father:after{
content: " ";
clear: both;
display: block;
}
总结

浮动元素后面增加空div

简单，代码中尽量避免空div
设置父元素的高度

简单，元素假设有了固定的高度，就会被限制
overflow

简单，下拉的一些场景避免使用
父类添加一个伪类：after（推荐）

写法稍微复杂一点，但是没有副作用，推荐使用！

定位

1 相对定位：position: relative;

相对于原来的位置，进行指定的偏移，相对定位的话，它任然在标准文档流中不会存在边框塌陷，原来的位置会被保留。

top: -20px;
left: 20px;
bottom: -10px;
right: 20px;

2绝对定位

定位：基于xxx定位，上下左右~

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

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

3、在父级元素范围内移动

设置绝对定位时要考虑设置相对定位，若相对浏览器则可以不用设置，如若相对父级元素，则需要将父级元素设置成相对定位。
相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在在标准文档流中，原来的位置不会被保留

3固定定位

position: fixed;
固定到浏览器的某个地方

Z-index

图层~
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

<div id="content">
    <ul>
        <li><img src="images/bg.jpg" alt=""> </li>
        <li class="tipText">学习微服务，找狂神</li>
        <li class="tipBg"></li>
        <li>时间：2099-01-01</li>
        <li>地点：月球一号基地</li>
    </ul>
</div>

</body>
</html>

#content{
    width: 380px;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px #000 solid;
}
ul,li{
    padding: 0px;
    margin: 0px;
    list-style: none;
}
/*父级元素相对定位*/
#content ul{
    position: relative;
}
.tipText, .tipBg{
    position: absolute;
    width: 380px;
    height: 25px;
    top: 216px;
}
.tipText{
    color: white;
    /*z-index: 0;*/
}
.tipBg{
    background: #000;
    opacity: 0.5; /*背景透明度*/
    filter: Alpha(opacity=50);
}

笑---

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css笔记

什么是CSSCSS全称Cascading Style Sheet 层叠级联样式表Css表现：美化页面字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动….创建格式：快速编写CSS第一种创建格式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...
复制链接

扫一扫