CSS使用指南

Star9999999

已于 2022-03-25 15:15:59 修改

阅读量123

点赞数

文章标签： css html 前端

于 2022-03-20 10:48:14 首次发布

本文链接：https://blog.csdn.net/m0_63042689/article/details/123608230

版权

文章目录

书写方式
指定方式
基础属性
链接伪类
添加小图标
块标签和行标签
列表样式与背景样式
- 1. 列表样式
- 2. 背景样式
盒子模型
浮动
清除浮动
定位
快捷代码复制区域

书写方式

/* 我是注释 */
内嵌式：在head里面写style用选择器书写属性
行内式：在任意标签里面直接写style
外链式：额外写一个css代码，用link在HTML文件里面使用

指定方式

独立ip选择

字体标签里面设置一个ip（id=p1），然后选择器打#p1做出独立设置（可设置多个标签同id）

多个class选择

字体标签里面设置一个class值（class=ooo），然后选择器打.ooo做出独立设置
可设置多种类（如颜色类，字体类），然后用于同一个标签<span class="blue font100">L</span>

后代选择器

可以给母标签设置一个id(aa)，然后通过#aa h3{}选择器来找到母标签内镶嵌的h3标签

并集选择器

div,h1,.title,#header(这是id) {}来一起设置

子代选择器

.one>p 表示的是子代标签选择器，选择的是.one下的子元素p

基础属性

颜色

color
	color=#00ff99
	rgb(255,0,0)
		rgb(100%,100%,100%)
	background设置背景颜色

字体位置

text-align
text-indent:2em;(可用于p调整开始位置)
line-height:100px(需要等于标签height高度)

字体样式

font-style
	italic(倾斜)normal(正常)

字体像素
```
font-size
	20px
```

字体形状

font-family
	微软雅黑，宋体等等

字体粗细
```
font-weight
	一般用400/700
```

划线

text-decoration
	underline下划线
	overline上划线
	line-through中划线
	none无划线(a标签好用)

元素转换

display：inline,block,inline-block,none;

链接伪类

a:link{}
	设置a标签普通状态
a:visited{}
	设置a标签点过之后的状态
a:hover
	鼠标悬浮在a标签上的状态
a:active
	长按a标签的状态

添加小图标

1.进入iconfont下载需要的图标
2.将四个重要的文件加入文件夹
3.在head标签中引入iconfont.css
4.在body标签中使用<span class="iconfont icon-xuesheng"></span>

块标签和行标签

块标签

<p>,<h1>,<div>,<li>
可以设置width,height
可以放块标签和行标签
可以使用垂直居中
	line-height:100px(需要等于标签height高度)

行标签
```
<b>,<i>,<span>
只能放行标签
```
img标签属于行内块元素，既能设置width和height也能一行有多个

三种元素的相互转换

display:inline
	将标签转为行内元素
display:block
	将标签转为块元素
display:inline-block
	将标签转为行内块元素（这样a标签就可以设置为购买和购物车按钮啦）
display:none
	用于隐藏元素

列表样式与背景样式

1. 列表样式

	 ul{list-style: url(111.png);}用图片替代圆点
	 ul{list-style:none;}取消无序列表的圆点

2. 背景样式

	 div{
        width: 3000px;
        height: 2000px;
        background-image: url(111.png);	给div加入一个背景图片
        background-repeat: no-repeat;	设置不会重复
    }
        body{
        background-image: url(111.png);
        background-attachment: fixed;固定使之背景不能随之滚动
    }

盒子模型

边框设置（盒子的边框）

border: 10px solid red   //设置总边框
border-top:3px solid #ff8500  //设置上边框
border-bottom:1px solid #edeef0  //设置下边框
//dashed虚线dotted点none无
//一般用id选择器特殊设置

补充：圆角边框
border-radius:10px
border-radius:50% 50% 50% 0 //设置左上 右上 右下 左下

内边距（边框与实体的距离）

说明：padding用于设置边框内的距离

padding:20px  //一次性设置上下左右内边距为20像素
padding:0 20px  //设置上下和左右
padding-top-left-right-bottom:  //设置上左右下边距
padding:5px 20px 50px 100px  //分别对应上右下左

外边距（边框与其他盒子的距离）

说明：margin用于设置边框之外的距离

marging:0  //一次性设置上下左右外边距为0像素
marging:5px 20px 50px 100px   //同时设置上右下左
marging-top-left-right-bottom:    //单独设置上左右下边距
marging:0 auto  //先设置上下，再设置左右（一般是居中显示）
marging-left:auto  //盒子靠左显示

盒子阴影

box-shadow:5px 5px 5px 5px #black inset
以上分别对应：水平阴影，垂直阴影，阴影程度，阴影大小，阴影颜色，内阴影（outset消失）

通配符选择器*

margin:0
padding:0
同时取消所有标签的内外边距

浮动

作用：使多个div可以在同一行显示
特点：会把原占有空间让给下一个元素
技巧：
1.可以将一个div放在另外一个div里面浮动
2.float:left，right;
3.<li>等列表标签也可以用，这也是块标签

清除浮动

操作方法：在父元素里面设置一个类father，类中写overflow:hidden
作用：浮动会让元素失去空间，导致后面的其他无浮动元素重叠空间，清除浮动则可以解决这种重叠问题

        .clearfix::before,
        .clearfix::after {
            content: "";
            display: table;
        }

        .clearfix::after {
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }

快捷操作：以上代码直接复制放入style区域即可，需要清除浮动的地方加类

定位

作用：设置一个盒子在网页中的位置

position(设置定位模式) //子绝父相

relative  //相对定位
	相对于自己原来占据位置的移动
	虽然移动了，但原来的位置仍然被自己占着
absolute  //绝对定位
	以带有定位的父级（相对，绝对，固定）元素来计算定位位置
fixd
	固定到页面的固定位置

position的属性

left/right  //设置与左右的距离
top/bottom  //设置与上下的距离
补充：定位导致盒子重叠怎么办？
答案：使用堆叠z-index:1  //设置堆叠优先级，这样固定的盒子不会被压住

快捷代码复制区域

快捷创建导航栏CSS指令

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            height: 41px;
            background-color: #fcfcfc;
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
            
        }
        a{
            display: inline-block;
            height: 41px;
            line-height: 41px;
            padding: 0 20px;
            text-decoration: none;
            color: #4c4c4c;
            font-size: 12px;
            border-radius: 5px;
        }
        a:hover{
            color: #ff8500;
            background-color: #eee;
        }
    </style>