css学习总结

最新推荐文章于 2024-05-28 12:36:33 发布

qq_45802327

最新推荐文章于 2024-05-28 12:36:33 发布

阅读量336

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_45802327/article/details/117903735

版权

Css

Css,级联样式表，Html用于撰写页面内容，Css将决定如何在屏幕上显示，my god！有点难，太多了，关于上课讲的内容，对付作业可能都不够用，哈哈哈哈，是有点这个感觉，但是，熟能生巧，打发时间嘛，我的时间够用。这样子的总结不是应付作业，是写给自己看的。

Css语法

有两种选择器，分别为 id 和 class 选择器，具体如何使用，如下：

id选择器
/* 注意：id选择器前有 # 号。 */
#sky{
  color: blue;
}
找到页面上id为sky的那个元素让它呈现蓝色，如下所示的页面，蓝色的天空这几个字就将会是蓝色的。
<p id="sky">蓝色的天空</p>
<p id="forest">绿色的森林</p>
class选择器
/* 注意：class选择器前有 . 号。 */
.center{
  text-align: center;
}
.large{
  font-size: 30px;
}
.red{
  color: red;
}
以上代码定义了三条规则，分别应用于页面上对应的元素，如只要页面上某元素的class为red，那么就让它呈现红色。
<p class="center">我会居中显示的</p>
<p class="red">我是红色的</p>
<p class="center large red">我又红又大还居中</p>
<p class="red">我也可以是红的</p>

Css如何生效
- 外部样式表使用<link rel="stylesheet" type="text/css" href="mycss.css">语句引入同一目录的一个样式表文件mycss.css。
- 内部样式表在<head> 中加入<style></style>标签，然后在里面加入内容即可。
- 内联样式直接把样式规则直接写到要应用的元素中，例如：<h3 style="color:green;">I am a heading</h3>。
  
  其中优先级别为：
  1. 内联样式
  2. 内部样式表或外部样式表
  3. 浏览器缺省样式（目前不太明白）
颜色，尺寸，对齐
- 颜色RGB16进制值，我不太明白，但是心里有这样的概念，具体内容可百度。
- 尺寸用height和width设定元素内容占据的尺寸。常见的尺寸单位有：像数 px，百分比 %等。
- 对齐，我们可以简单的设置text-align属性为left, center, right即可
盒子模型

由内容 content, 内边距 padding, 边框 border, 外边距 margin构成的。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WVLfQdCC-1623651959988)(D:\downloads\markdown数据\盒子模型.jpg)]

具体内容参考： qige.io
边框与边距

border 上下左右都相同，border-bottom 只设置底部，border-radius，边框圆角，border-left，只设置左边，dotted，虚线，solid，实线。
定位
- static 静态
默认定位方式，按从上到下，从左到右的方式布局。
- relative 相对
相对于它的静态位置进行偏移。
- fixed 固定
使元素相对于viewport(浏览器的屏幕可见区域）固定不动
- absolute 绝对
使元素相对于其最近设置了定性属性的父元素进行偏移，如果该元素的所有父元素都没有设置定位属性，那么就相对于<body>这个父元素。

必须设置position属性，才能使用top,bottom,left,right,属性。

溢出

visible 默认值，溢出部分不被裁剪，在区域外面显示

hidden 裁剪溢出部分且不可见

scroll 裁剪溢出部分，但提供上下和左右滚动条供显示

auto 裁剪溢出部分，视情况提供滚动条

通过overflow属性来处理溢出部分。

例如以下例子：

<div class="example-overflow-scroll-y">You can use the overflow property when you want to have better control of the
    layout. The overflow property specifies what happens if content overflows an element's box.
</div>

.example-overflow-scroll-y {
  width: 200px;
  height: 100px;
  background-color: #eee;
  overflow-y: scroll;
}

浮动

通过float属性让某元素水平方向上向左/右进行移动，其周围元素也会重新排列。格式如下：
 .example-float-right {
      float: right;
    }
如果希望浮动元素后面的元素在其下方显示，可使用clear: both样式来进行清除。

不透明度

用opacity对任何元素（不过常用于图片）设置不透明度。值在[0.0～1.0]之间，值越低，透明度越高。
组合选择器
- 后代选择器
  
  以空格作为分隔，如：.haha p 代表在div元素内有.haha这种类的所有元素。
- 子选择器
  
  称为直接后代选择器，以>作为分隔，如：.haha > p 代表在有.haha类的元素内的直接<p>元素，注意：只针对直接子元素才有效。
伪类和伪元素

伪类（pseudo-class）或伪元素（pseudo-element）用于定义元素的某种特定的状态或位置等。

常有的伪类以及伪元素请参考：qige.io

心得：

Css样式太多了，真的是各式各样，上面的只是冰山一角，有时候想做点样式出来，却不知道样式的具体标签，很头痛，这个问题我还不知道怎么解决，可能是现在时间花少了导致的，想试着做点东西，慢慢来。

常有的伪类以及伪元素请参考：qige.io

心得：

qq_45802327

关注

0
点赞
踩
0

收藏

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

CssCss,级联样式表，Html用于撰写页面内容，Css将决定如何在屏幕上显示，my god！有点难，太多了，关于上课讲的内容，对付作业可能都不够用，哈哈哈哈，是有点这个感觉，但是，熟能生巧，打发时间嘛，我的时间够用。这样子的总结不是应付作业，是写给自己看的。Css语法有两种选择器，分别为 id 和 class 选择器，具体如何使用，如下：id选择器/* 注意：id选择器前有 # 号。 */#sky{ color: blue;}找到页面上id为sky的那个元素让它呈现
复制链接

扫一扫