CSS

css

css:Casecading Style Sheet 层叠样式表

html:Hyper Text Markup Language超文本标记语言

编写

  1. 在head标签里使用style标签编写CSS代码

    选择器{

    ​ 声明1；

    }

  2. html与css分离编写

    使用标签外部引用css文件

h1{
   color: brown;
}

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

css优势

  1. 实现内容与样式分离
  2. 网页结构表现统一，可以实现复用
  3. 样式丰富
  4. 建议使用独立于html的css文件
  5. 利用SEO，便于被搜索引擎收录

css样式表

  1. 行内样式表

    <h1 style="color: blue;">首页</h1>

  2. 外部样式表

    h1{
   color: brown;
}

/*使用link连接式*/
<link rel="stylesheet" href="css/css1.css">
/*使用import导入式*/
<style>
	@import url("css/css1.css");
</style>

  3. 内部样式表

    <style>
    h1{
       color:aqua;
    }
</style>

优先级：谁离元素近，谁的优先级就高

选择器

选择页面上的某一个或者某一类元素

基本选择器

  • 元素选择器：直接选择某标签，选中页面内所有的这个标签

  • 类选择器：.类名，选中特定的类

    可以将多个元素归为一类，将这多个元素统一修改样式

  • id选择器：#id名，选中特定id

    id拥有唯一性

优先级：id选择器>类选择器>元素选择器

层次选择器

  1. 后代选择器：祖爷爷 爷爷 爸爸 儿子

    body p{
    background-color: aqua;
}

  2. 子选择器：当前的下一代 祖爷爷 爷爷 爸爸 儿子

    body>p{ 
     background-color: aqua;
}

  3. 相邻兄弟选择器：向下相邻，选一个

    #no1+li{
      background-color: aqua;
}

  4. 通配选择器：向下相邻的所有兄弟都被选中

    #no1~p{
      background-color: aqua;
}

优先级：相邻兄弟选择器=通配选择器>子选择器>后代选择器

​ 相邻兄弟选择器和通配选择器：谁近选谁

结构伪类选择器

伪类：有条件的选择

<head>
    <meta charset="UTF-8">
    <title>首页</title>
    
    <style>
        /*选ul下第一个li*/
        ul li:first-child{
            background-color: green;
        }
        /*选ul下最后一个li*/
        ul li:last-child{
            background-color: lightblue;
        }
        /*定位p元素的父元素，顺序找第一个元素，是p变色，不是p改变*/
        p:nth-child(1){
            background-color: lightcoral;
        }
        /*定位p元素的父元素，找第一个类型是p的，改变第一个的颜色*/
        p:nth-of-type(2){
            background-color: lightgray;
        }
    </style>
</head>
<body>
    
    <p >用户注册</p>
    <p >用户登录</p>
    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
        <li>li4</li>
    </ul>
</body>

属性选择器

标签[属性]{

​ 声明1；

}

作用：选出具有某一属性的标签。（将class和id选择器结合）

/*选出class中带有list的元素*/
a[class*=list]{
    声明1;
}
/*选出具有class属性的元素*/
a[class]{}
/*选出居有id属性的元素*/
a[id]{}
/*选出id=xxx的元素*/
a[id=xxx]{}

正则表达式：

= 绝对相等

*= 包含

^= 以……开头

$= 以……结尾

美化网页

作用：吸引用户注意，传递有效信息

字体

font-family:字体样式

font-size:字体大小

font-weight:字体粗细

color:字体颜色

p{
  font:bolder 30px "楷体";
}
/*粗细  大小  样式*/

文本

color:颜色

text-align:文本排版

text-indent:首行缩进（xem)

height:块的高度

line-height:行高

text-decoration:underline下划线

text-decoration:line-through 中划线

text-decoration:overline 上划线

list-style:none 消除列表前面的黑点点

只有行高等于块高时，文字才能在行中间*

阴影

text-shadow:阴影颜色 水平偏移 竖直偏移

背景

背景颜色：background-color

背景图片：background-image

background:颜色 图片 位置x 位置y 是否重复

盒子模型

image-20220712172036201

默认的margin不为0

边框：border：粗细 样式（solid 实线 dashed 虚线） 颜色

外边距：居中 margin:0 auto;

内边距：padding

盒子计算：margin+border+padding+内容区

圆角边框

border-radius

四个值：10px 20px 30px 40px 左上10 右上20 右下30 左下40

三个值：10px 20px 30px 左上10px 右上和右下20px 左下30px

两个值：10px 20px 左上和右下10px 右上和左下20px

一个值：10px 四个角都一样是10

可以通过设置边框从而改变图片的样式

盒子阴影

{
    box-shadow:10px(x) 10px(y) 100px(模糊值) red(颜色);
}

浮动

  1. 行内元素中不能包含块级元素

  2. display：block(块元素) inline(行内元素) inline-block(是块元素但是保存在一行) none(消失)方向不能控制

  3. 左右浮动：float:left(right);

  4. 清除浮动：当页面大小发生变化，浮动的图片会挤压文字时，就要清除文字周围的浮动。

    clear:left;  //左侧不允许有浮动，如果有则自动排到下一行
clear:right;  //右侧不允许有浮动，如果有则自动排到下一行
clear:both;   //周围不允许有浮动，如果有则自动排到下一行
clear:none;

父级边框塌陷问题

问题：元素浮动float之后，排列在父级边框外

解决方案：1.增加父级元素高度

.father{
      border:10px dashed burlywood;
      height:500px;             
 }
 img{
      width: 300px;
      height:400px;
      float:right;
 }

​ 2.在最后增加一个空的div，清除浮动

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

​ 3.在父级元素中设置属性overflow：hidden

.father{
	  border:10px dashed burlywood;
      overflow: hidden;
}

​ 4.父类添加一个伪类(和手动添加一个div块概念是一样的)

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

overflow

当内容超出时，可以使用overflow隐藏或者滚动

.produce{
      height:100px;
      width: 500px;
      overflow: scroll;
}

scroll:生成滚动条

hidden:隐藏超出部分

定位

页面内固定不动的部分

  1. 相对定位

    相对于原来的位置进行指定的偏移,原来的位置会被保留，不会造成父级边框塌陷。

    first{
     border: 5px dashed lightcoral;
 	 margin: 5px;
 	 position: relative;
     top:-30px;
}

    上移：top 下移：bottom 左移：left 右移：right

  2. 绝对定位

    基于xxx定位，会造成父级边框塌陷

    • 没有父级元素，相对于浏览器定位

    • 父级元素有定位，相对于父级元素定位，不能超过父级元素

      #father{
    border: 5px solid red;
    padding:1px;
    position: relative;
    width: 500px;
    height:300px;
}
#first{
    border: 5px dashed rgb(167, 198, 135);
    position: absolute;
    top:100px;
    background-color: black;
}

    3.固定定位fixed

    ​ 固定到某一具体位置,不会随着页面的变动而变动

    #first{
    border: 5px dashed rgb(167, 198, 135);
    position: fixed;
    top:100px;
    left:100px;
    background-color: black;
}

z-index

修改层级：最大为999，默认是0

opacity:0.5 //调节背景不透明度

posted @ 2022-07-13 16:46  lerry1342  阅读(41)  评论(0)    收藏  举报