欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

萌新CSS初始总结

程序员文章站 2022-04-14 14:06:05
CSS总结前言最近几天初步学习了CSS，针对CSS部分知识点在此进行一些总结。1，什么是CSS？CSS是Cascading Style Sheets的简称 中文称层叠样式表问：CSS是用来做什么的？答：CSS主要用来设计网页的样式，美化网页。2，怎么引入CSS？CSS有四种引入方式分别是行内式嵌入式链接式导入式行内式行内式是在行内直接设置元素的style属性例
hello
嵌入式...

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

上一篇： 新手学Python有什么好方法和建议? 10年经验分享

下一篇： mysql日志管理

推荐阅读