CSS学习总结

最新推荐文章于 2022-07-09 17:06:38 发布

...x

最新推荐文章于 2022-07-09 17:06:38 发布

阅读量89

点赞数

本文链接：https://blog.csdn.net/yychNB/article/details/118002823

版权

CSS学习总结

#css基本语法

h1{
    color:rgb(0, 195, 255);
    background-color: yellow;
    text-align:center; 
  }

这个规则下，在页面中所有一级标题为蓝色，背景颜色为黄色，文本居中。

h1为选择器，选择需要改变的样式的对象。
color为属性，rgb为值。不仅可以改变颜色，也可以改变字体大小等。

除了用元素做选择器，还有id和class等。
id选择器

#s1{
    color: rgb(223, 106, 178);
    text-align:center;

其中id为s1，前面有#，id为s1的元素就会展现为上述格式。
class选择器

.s2{
    color: rgb(255, 0, 191);
    text-align:center;

如下使用选择器后会呈现不同结果

<p id="s1">这家伙很棒</p>
<p class="s2">这家伙很棒</p>

#颜色和尺寸
选择颜色时通常使用颜色名称或者颜色RGB16进制值。如

<h1 style="color:Orange;">Orange</h1>
<h2 style="color:#0000ff;">#0000ff</h2>

在ColorDrop和LOL Corlors中可以选择现有的模板进行搭配。

除了颜色，还有格式可以进行修改。通常可以使用height和width设定元素占据的尺寸。常见的尺寸单位有象素px和百分比%。我通常情况下会使用百分比。

#s3{
    width: 80%;
    height: 100px;
    text-align: center;

其中，text-align属性为居中，也可改为left或者right

#边框边距
盒子模型是个很好的样例，盒子是由内容 content, 内边距 padding, 边框 border, 外边距 margin构成的。

content是内容，如文本、图片等。
Padding 是填充，也叫内边距，即内容和边框之间的区域。
Border 边框，默认不显示。
Margin 外边距，边框以外与其它元素的区域。
如

.box {
  border: 10px solid red;
  padding: 25px;
  margin: 25px;
}

边框和边距都可以根据需求更改。
如边框更改如下：

#s1{
    border: 1px dotted black; /* 上下左右都相同 */
}
#s2{
    border-radius: 20px; /* 边框圆角 */
}

边距同理。

#定位与浮动
在css中我们可以使用position属性对于纳苏进行定位。其值有static 静态，relative 相对，fixed 固定，absolute 绝对。设置了position后便可以使用top, bottom, left, right等属性，否则无法定位。

static：设置为静态定位position: static;元素的默认定位方式,按照元素在 HTML出现的先后顺序从上到下，从左到右进行元素的安排。
relative：这将把元素相对于他的静态位置进行偏移
fixed：这将使得元素固定不动，互惠随着浏览器的滚动而变化。
absolute：使元素相对于其最近设置了定位属性（非static）的父元素进行偏移。
如果该元素的所有父元素都没有设置定位属性，那么就相对于<body>这个父元素。（其定位是相对的）

在一个区域或容器内，我们可以设置float属性让某元素水平方向上向左或右进行移动，其周围的元素也会重新排列。

<html>
<head>
  <style>
    .example-float-right {
      float: right;
    }
  </style>
</head>
<body>
  <img src="" alt="">
  <p></p>
</body>
</html>