关于对css学习的总结

最新推荐文章于 2024-07-14 16:50:03 发布

Arzlov1

最新推荐文章于 2024-07-14 16:50:03 发布

阅读量91

点赞数

文章标签： css

本文链接：https://blog.csdn.net/qq_52621223/article/details/114761025

版权

关于对css学习的总结：
CSS,级联样式表（Cascading Style Sheets,决定html编写的内容该如何在屏幕上呈现，即美化作用。
1.语法：一条CSS样式规则由两个主要的部分构成：选择器，以{}包裹的一条或多条声明:例p{//选择器
color:red;//声明，由属性和值组成
text-align:center;
}
选择器有元素选择器、id选择器和class选择器。
2.CSS的使用有三种方法，外部样式表，内部样式表和内联样式，外部样式表要在同一目录下新建一个样式表文件mycss.css，而内部样式表则是将样式放在html文件中
3.颜色，尺寸与对齐
1)颜色
使用颜色RGB16进制值，来设定前景或背景的颜色。

<h3 style="background-color:Tomato;">Tomato</h3>
<h3 style="background-color:#ff0000;">#ff0000</h3>

(2)尺寸
用 height 和 width 设定元素内容占据的尺寸。常见的尺寸单位有：像数 px，百分比 %等。
先新建样式表文件

.example-1 {
  width: 100%;//占据全部宽度
  height: 200px;//高两百像素
  background-color: powderblue;
  text-align: center;
}

再新建HTML文件

<html>
  <head>
    <link rel="stylesheet" href="./mycss.css">//样式表地址
  </head>
  <body>
    <div class="example-1">//引用样式表
      任意文字
    </div>
  </body>
</html>

(3)对齐
对于元素中的文本，我们可以简单的设置text-align属性为left, center, right即可。

p{color:red;text-align:left;//左对齐}

4.盒子模型
盒子模型指的是一个 HTML 元素可以看作一个盒子。从内到外，这个盒子是由内容 content, 内边距 padding, 边框 border, 外边距 margin构成的。
5.定位
用position属性对元素进行定位，具有以下值：
static//静态，按照html里编写的排列
relative//相对，相对于static的位置
fixed//固定，相对于视口的位置
absolute//绝对，相对于其父元素的位置
6.浮动
在一个区域或容器内，我们可以设置float属性让某元素水平方向上向左或右进行移动，其周围的元素也会重新排列。一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。个元素浮动后，其后的元素将尽可能包围它，或者说出现在这个浮动元素的左或右方。
如果希望浮动元素后面的元素在其下方显示，可使用clear: both样式来进行清除。
7.不透明度
通过opacity对元素设置不透明度，取值在0.0~1.0之间，值越小越透明。
8.组合选择器
(1)后代选择器
以空格作为分隔，如：.haha p 代表在div元素内有.haha这种类的所有元素。
2)子选择器
也称为直接后代选择器，以>作为分隔，如：.haha > p 代表在有.haha类的元素内的直接

元素。
9.伪类和伪元素
伪类（pseudo-class）或伪元素（pseudo-element）用于定义元素的某种特定的状态或位置等。
以下是常用的伪类/伪元素的简单使用：

a:link {color:#FF0000;}     /* 未访问的链接 */
a:visited {color:#00FF00;}  /* 已访问的链接 */
a:hover {color:#FF00FF;}    /* 鼠标划过链接 */
/* 鼠标移到段落则改变背景颜色 */
p:hover {background-color: rgb(226, 43, 144);}
p:first-line{color:blue;}   /* 段落的第一行显示蓝色 */
p:first-letter{font-size: xx-large;}   /* 段落的第一个字超大 */

h1:before { content:url(smiley.gif); } /* 在每个一级标题前插入该图片 */
h1:after { content:url(smiley.gif); } /* 在每个一级标题后插入该图片 */

Arzlov1

关注

0
点赞
踩
0

收藏

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

关于对css学习的总结：CSS,级联样式表（Cascading Style Sheets,决定html编写的内容该如何在屏幕上呈现，即美化作用。1.语法：一条CSS样式规则由两个主要的部分构成：选择器，以{}包裹的一条或多条声明:例p{//选择器color:red;//声明，由属性和值组成text-align:center;}选择器有元素选择器、id选择器和class选择器。2.CSS的使用有三种方法，外部样式表，内部样式表和内联样式，外部样式表要在同一目录下新建一个样式表文件mycss.cs
复制链接

扫一扫