css学习总结

最新推荐文章于 2024-04-19 20:33:06 发布

想写好代码的小香菜

最新推荐文章于 2024-04-19 20:33:06 发布

阅读量338

点赞数

文章标签： css 学习 css3

本文链接：https://blog.csdn.net/weixin_59049031/article/details/125284319

版权

css学习总结

CSS简介
CSS的基本使用方式
CSS字体和文本的相关属性
盒子模型
CSS边框和边距
CSSPosition(定位)
CSS布局溢出、浮动和不透明度
CSS 组合选择符
CSS伪类和伪元素

CSS简介

什么是css：
css称为层叠样式单。
它是一种专门描述结构文档的表现方式的文档，主要用于网页风格设计，包括字体大小、颜色、以及元素的精确定位等。
在传统的web网页设计里，使用CSS能让单调的HTML网页更富有表现力。
CSS与传统HTML描述数据方式比较有那些优势
表达效果丰富
文档体积比较小
便于信息检索
可读性好
注意：CSS是将文档格式和样式分离，便于管理和修改，使网页更加完善。

CSS的基本使用方式

1、什么是css
css：层叠样式表，Cascading Style Sheet 的简写。css是一组样式设置的规则，用于控制页面的外观样式。
2、为什么使用css

实现内容与样式的分离，便于开发设计
样式复用，便于网站的后期维护
页面的精确控制，让页面更精美

3、css语法
一条CSS样式规则由两个主要的部分构成：选择器，{}，括号中可写一条或多条声明。格式如下所示：

 选择器{
			  属性名：属性值;
			  属性名：属性值;
		   }
      p{
           color:red;
           text-align:center;  /* 文本居中 */
      }

选择器：要修饰的对象。
属性：修饰对象的哪一个属性。
属性值：样式的取值。

css选择器id选择器和class选择器。id选择器前有’#‘号，找到对应id的元素就可以改变该元素的样式,id 选择器适用范围只有一个元素。class选择器前有’.'号,元素的class值可以多个，也可以重复,因此class选择器的应用更普遍。

4、css的引用方式

CSS可以控制HTML文档的显示。但在控制文档显示之前，首先应在需要显示的HTML文档中引入CSS样式单。

HTML提供了以下四种引入方式：
- 使用内联样式：这种方式将样式内联定义到具体的HTML元素上，通常用于精确控制一个HTML元素的表现。
- 使用内部样式定义：这种方式是通过在html文档头定义样式单部分来实现，在这种方式下，每批CSS样式只能控制一份HTML文档。
- 链接外部样式文件：这种方式将样式文件彻底与HTML文档分离，样式文件需要额外引入。在这种方式下，一份样式可控制多份文档。
- 导入外部样式文件：这种方式与第三种方式类似，只能使用@import来引入外部样式表文件。
使用内联样式（行内样式）：
内联样式是所有样式中最为直接的一种，它直接对HTML标签使用style属性。直接把样式规则直接写到要应用的元素中，表现形式与HTML没有做分离。示例如下：<h3 style="color:green;">I am a heading</h3>

使用内部样式（内嵌样式）：
内部样式是将CSS写在与之间，并且用标记进行声明。
他将表现形式与结构分离出来:

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 注意下面这个语句，将导入外部的 mycss.css 样式表文件 -->
<link rel="stylesheet" type="text/css" href="mycss.css">
<title>页面标题</title>
<style>
body {
  background-color: linen;
  text-align: center;
}
h1 {
  color: red;
}
.haha {
  margin-top: 100px;
  color: chocolate;
  font-size: 50px;
}
</style>
</head>
<body>
<h1>我是有样式的</h1>
<hr>
<p class="haha">还是有点丑：)</p>
</body>
</html>

引入外部样式文件：
最常用的引用方式，先新建一个html文件（后缀为.html)，然后在同一目录下新建一个样式表文件mycss.css（注意后缀名为css），使用语法：<link type="text/css" rel="stylesheet" href="./mycss.css">
```
  以上三种方式使用样式的优先级从高到低依次是：
  1.内联样式
  2.内部样式表或外部样式表
  3.浏览器缺省样式
```

CSS字体和文本的相关属性

颜色：颜色属性被用来设置文字的颜色。颜色是通过CSS最经常的指定，指定方式有三种：十六进制值、RGB值、颜色的名称，比如#RRGGBB、RGB(250,0,0)、red。
尺寸：可以使用 height 和 width 设定元素内容占据的尺寸。

属性	描述
height	设置元素的高度。
line-height	设置行高。
max-height	设置元素的最大高度。
max-width	设置元素的最大宽度。
min-height	设置元素的最小高度。
min-width	设置元素的最小宽度。
width	设置元素的宽度。

对齐：这是css的文本排列属性，文本可居中或对齐到左或右，可以简单的设置text-align属性为left, center, right。

  h1 {text-align:center;}
  p.date {text-align:right;}
  p.main {text-align:justify;}

字体：html中可控制字体样式、字体大小和像素，下表中为所有css字体属性

Property	描述
font	在一个声明中设置所有的字体属性
font-family	指定文本的字体系列
font-size	指定文本的字体大小
font-style	指定文本的字体样式
font-variant	以小型大写字体或者正常字体显示文本。
font-weight	指定字体的粗细。

盒子模型

盒子模型：一个 HTML 元素可以看作一个盒子。从内到外，这个盒子是由内容 content, 内边距 padding, 边框 border, 外边距 margin构成的。盒子模型允许我们在其它元素和周围元素边框之间的空间放置元素。如下图所示：
在这里插入图片描述

Margin(外边距) ：清除边框外的区域，外边距是透明的。
Border(边框)：围绕在内边距和内容外的边框。
Padding(内边距)：清除内容周围的区域，内边距是透明的。

Content(内容) ：盒子的内容，显示文本和图像。
例子如下：

  div {
      width: 300px;
      border: 25px solid green;
      padding: 25px;
      margin: 25px;
    }

CSS边框和边距

CSS边框属性可以允许指定一个元素边框的样式和颜色。border-style属性用来定义边框的样式，border-width 属性用来指定边框宽度， border-color 属性用来指定边框颜色。示例如下：

.example-1 {
   border: 1px dotted black; /* 上下左右都相同 */
 }
.example-2 {
   border-bottom: 1px solid blue; /* 只设置底部边框 */
}
.example-3 {
   border: 1px solid grey;
  border-radius: 15px; /* 边框圆角 */
}
 .example-4 {
    border-left: 5px solid purple;
}

CSSPosition(定位)

position 属性指定了元素的定位类型。
position 属性的五个值：

static：position: static;静态定位是元素的默认定位方式。
relative：position: relative;相对定位把元素相对于他的静态（正常）位置进行偏移
fixed：position: fixed;固定定位固定元素不动。
absolute：position: absolute;绝对定位使元素相对于其最近设置了定位属性（非static）的父元素进行偏移。
sticky：position: sticky;粘性定位基于用户的滚动位置来定位

CSS布局溢出、浮动和不透明度

CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。overflow属性有以下值：
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。
CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。Float（浮动），往往是用于图像，但它在布局时一样非常有用。受用clear可以清除浮动。
不透明度，用opacity对任何元素设置不透明度，此属性常用于设置图片。

CSS 组合选择符

组合选择符说明了两个选择器之间的关系。可对元素、id和class进行组合。css中有四种组合方式，

后代选择器(以空格分隔)div p { background-color:yellow; }
子元素选择器(以大于 > 号分隔）div>p { background-color:yellow; }
相邻兄弟选择器（以加号 + 分隔）div+p {background-color:yellow; }
普通兄弟选择器（以波浪号 ～ 分隔）div~p{ background-color:yellow; }

CSS伪类和伪元素

伪类（pseudo-class）或伪元素（pseudo-element）用于定义元素的某种特定的状态或位置等。可以用来添加一些选择器的特殊效果。
伪类和伪元素的语法相似，只是目标作用属性不同。
伪类的语法：
selector:pseudo-class {property:value;}
CSS类也可以使用伪类：
selector.class:pseudo-class {property:value;}
伪元素的语法：
selector:pseudo-element {property:value;}
CSS类也可以使用伪元素：
selector.class:pseudo-element {property:value;}

想写好代码的小香菜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css学习总结

什么是css：css称为层叠样式单。它是一种专门描述结构文档的表现方式的文档，主要用于网页风格设计，包括字体大小、颜色、以及元素的精确定位等。在传统的web网页设计里，使用CSS能让单调的HTML网页更富有表现力。CSS与传统HTML描述数据方式比较有那些优势表达效果丰富文档体积比较小便于信息检索可读性好注意：CSS是将文档格式和样式分离，便于管理和修改，使网页更加完善。1、什么是csscss：层叠样式表，Cascading Style Sheet 的简写。css是一组样式设置的规则，用于
复制链接

扫一扫