当前位置： 移动技术网 > IT编程>网页制作>CSS > 萌新CSS初始总结

萌新CSS初始总结

2020年07月12日  | 移动技术网IT编程  | 我要评论

CSS总结

前言
最近几天初步学习了CSS，针对CSS部分知识点在此进行一些总结。

1，什么是CSS？

CSS是Cascading Style Sheets的简称 中文称层叠样式表

  • 问：CSS是用来做什么的？
  • 答：CSS主要用来设计网页的样式，美化网页。

2，怎么引入CSS？

CSS有四种引入方式分别是

  • 行内式
  • 嵌入式
  • 链接式
  • 导入式
  • 行内式
    行内式是在行内直接设置元素的style属性
    例
<div style="这里写样式">hello</div>
  • 嵌入式
    嵌入式是把css样式写在网页head元素的标签中
    例
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style  type="text/css">
      这里写样式
    </style>
</head>
  • 链接式
    链接式将一个外部*.css文件引入到HTML文件中。（最常用）
    例

<link href="mystyle.css" rel="stylesheet" type="text/css"/>
  • 导入式
    将一个独立的.css文件引入到HTML文件中，写在style标签中。先加载网页，再加载CSS文件
    例
<style type="text/css">
 
          <link href="My.css" rel="stylesheet" type="text/css">
 
</style>

样式的应用顺序：

  • 行内式优先级最高
  • 针对相同的样式属性，不同的样式属性将以合并的方式呈现
  • 相同样式并且相同属性，呈现方式将会按顺序顺序决定，后面会覆盖前面属性
  • !important 指定样式最优先

3，选择器

基本选择器：
1、通配符选择器

* 表示选择所有的标签。

*{margin:0;padding:0;}

2、标签选择器
标签选择器，选择所有使用某标签的元素

div {color:green;}

3、类选择器
选择所有class属性中包含info的元素。

.info{color:blue;}

4、id选择器
选择所有id属性等于myid的元素 在一个网页中id的值都是唯一的

#myid {color: yellow}

此外还有组合选择器，后代元素选择器，伪类选择器等等

4，CSS中的常用属性

  1. 颜色属性
<div style="color:blue">（单词，使用方式：color:blue）</div>
 
<div style="color:#ffffff">（十六进制色：color: #FFFF00 --> 缩写：#FF0）</div>
 
<div style="color:rgb(255,255,255)">RGB（红绿蓝，使用方式：color:rgb(255,255,0)或者color:rgb(100%,100%,0%)）</div>
 
<div style="color:rgba(255,255,255,0.5)">（红绿蓝透明度，A是透明度在0~1之间取值。使用方式：color:rgba(255,255,0,0.5)）</div>
  1. 字体属性:
font-size: 14px 设置字体大小 可以非常大 不能非常小 
 
font-family:A,B,C,D  设置字体类型
 
font-weight: normal  bold  bolder  100  200  300   设置字体是否加粗
 
font-style: normal  italic  设置字体是否倾斜

font: 复合属性
font:font-style font-weight font-size/line-height
color:blue  设置字体颜色
  1. 文本属性:
text-decoration: none 默认/underline 下划线/overline 上划线/line-through 中线 文本的装饰线
 
line-height: 100px;   设置行高
 
 
vertical-align:  baseline;文本所在行高的垂直对齐方式 只对行内元素有效，对块级元素无效
 
text-indent: 2em;   首行缩进
 
letter-spacing: ;  字间距

word-spacing: ;    词间距

text-overflow: ;   文本溢出样式
word-wrap: ;   自动换行
 
等等
  1. 背景属性:
background-color: blue; 设置背景颜色
 
background-image: url('x.jpg'); 设置图像为背景
 
background-repeat: no-repeat(不平铺);(repeat:平铺)
 
background-position: x轴 y轴;设置背景图像的位置坐标
 
background: x px y px no-repeat blue url('x.jpg') 综合设置
  1. 列表属性:
list-style: decimal-leading-zero;
list-style: none; 去除标志      
list-style: circle; 空心圆
list-style: upper-alpha; 实心圆
list-style: disc; 实心圆
  1. display属性:
display:none ; 不显示
display:block; 显示为块级元素
display:inline; 显示为内联元素
display:inline-block; 行内块元素
display:list-item; 显示为列表元素。
  1. 边框属性:
border-style: solid; solid实线  dashed虚线
border-color: red;
border-width: 1px;
border: 1px solid red ;
border-radius：; 圆角

5，盒模型

  • padding:用于控制内容与边框之间的距离;
  • margin:用于控制元素与元素之间的距离;
  • Border:围绕在内边距和内容外的边框;
  • Content:盒子的内容。

padding、margin 表示上右下左都应用
padding-top、margin-top 上
padding-right、margin-right 右
padding-bottom、margin-bottom 下
padding-left、margin-left 左

  • 关于padding,margin参数个数问题

一个参数，应用于四边。
两个参数，第一个用于上、下，第二个用于左、右。
三个参数，第一个用于上，第二个用于左、右，第三个用于下。
四个参数，第一个用于上，第二个用于右，第三个用于下，第四个用于左。

6，float属性

  • 问：什么是float属性？

  • 答: 浮动的初衷是为了实现字围效果，后来常用于块级元素和行内元素在文档流中排列。

  • 问：什么是文档流？

  • 答: 元素在排版布局过程中，元素自动从左往右，从上往下进行流式排列。

float:none; 不浮动
float:left; 左浮动
float:right; 右浮动

浮动的特点：

  • 如果两个元素向同一方向浮动，那么这两个元素会紧紧贴在一起。
  • 如果是一个块级元素在没有设置宽度的情况下，浮动时他的宽度会尽可能小。
  • 如果一个元素内部所有元素浮动，父级元素在没有设置高度的情况下会导致父元素塌陷。
  • 如果一个行内元素浮动了，就会变成块级元素。

元素浮动的影响：
元素浮动会对父级元素以及后面的兄弟元素造成影响。

清除浮动对父级元素的影响

  • overflow:hidden
  • 给父级元素加一个高度。

清除浮动对后面兄弟元素的影响

clear: left/right/both;
clear只能卸载第一个受影响的元素上面，不能写在父级元素上。

本文地址：https://blog.csdn.net/qq_42632014/article/details/107279556

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网