关于CSS的学习记录

最新推荐文章于 2024-05-21 21:14:20 发布

JustA-LoNg

最新推荐文章于 2024-05-21 21:14:20 发布

阅读量139

点赞数 1

文章标签： css

本文链接：https://blog.csdn.net/weixin_45189628/article/details/115342485

版权

一、CSS简介

CSS 指层叠样式表 (Cascading Style Sheets)。HTML 用于撰写页面的内容，而 CSS 将决定这些内容该如何在屏幕上呈现。样式通常存储在样式表中，外部样式表可以极大提高工作效率。
可以说，CSS的出现，让网页的内容和样式代码从HTML中脱离了出来

二、CSS语法

一条CSS样式规则由两个主要的部分构成：选择器，以{}包裹的一条或多条声明:
在这里插入图片描述
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

1.ID选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
id选择器前有 # 号

具体格式为

#sky{
  color: blue;
}

2.class 选择器

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class选择器前有 . 号。

具体格式为

.center{
  text-align: center;
}
.large{
  font-size: 30px;
}
.red{
  color: red;
}

三、CSS样式表

1.外部样式表

外部样式表应用于很多页面时

<head>
  <link rel="stylesheet" type="text/css" href="mycss.css">
</head>

浏览器会从文件 mycss.css 中读到样式声明，并根据它来格式文档。

2.内部样式表

当单个文档需要特殊的样式时，就应该使用内部样式表。

<!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>

3.内联样式

直接把样式规则直接写到要应用的元素中

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

4.样式优先级

样式的优先级问题，从高到低分别是：

内联样式
内部样式表或外部样式表
浏览器缺省样式

四、CSS背景颜色

使用background-color 属性定义了元素的背景颜色.

例如

body {background-color:#b0c4de;}

在CSS中，颜色一般用以下三种方式定义

十六进制 - 如："#ff0000"
RGB - 如：“rgb(255,0,0)”
颜色名称 - 如：“red”

五、CSS元素尺寸

我们可以用 height 和 width 设定元素内容占据的高度和宽度。

例如

.example-1 {
  width: 100%;
  height: 200px;
  background-color: powderblue;
  text-align: center;

六、CSS 盒子模型

一个 HTML 元素可以看作一个盒子，它包括：边距，边框，填充，和实际内容。

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

例如

<html>
  <head>
    <link rel="stylesheet" href="./mycss.css">
  </head>
  <body>
    <div class="box1">我是内容一，外面红色的是我的边框。注意边框的内外都有25px的距离。</div>
  </body>
</html>

.box1 {
  height: 200px;
  width: 200px;
  background-color:#615200;
  color: aliceblue;
  border: 10px solid red;
  padding: 25px;
  margin: 25px;
}

在浏览器中显示为
在这里插入图片描述

七、CSS边框

CSS边框属性允许你指定一个元素边框的样式和颜色。

1.边框

例如

<p class="example-1">I have black borders on all sides.</p>
<p class="example-2">I have a blue bottom border.</p>
<p class="example-3">I have rounded grey borders.</p>
<p class="example-4">I have a purple left border.</p>

.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;
}

在浏览器中显示为
在这里插入图片描述

2.边距

padding: 20px; /* 上下左右都相同 */
padding-top: 20px;
padding-bottom: 100px;
padding-right: 50px;
padding-left: 80px;
padding: 25px 50px 75px 100px; /* 简写形式，按上，右，下，左顺序设置 */
padding: 25px 10px; /* 简写形式，上下为25px，左右为10px */

在浏览器中显示为
在这里插入图片描述

八、CSS定位

position属性用于对元素进行定位。

position 属性的五个值：

static
relative
fixed
absolute
sticky

1.static 定位

HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
静态定位的元素不会受到 top, bottom, left, right影响。

div.static {
    position: static;
    border: 3px solid #73AD21;
}

2.fixed 定位

元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动

p.pos_fixed
{
    position:fixed;
    top:30px;
    right:5px;
}

3.relative 定位

相对定位元素的定位是相对其正常位置。

h2.pos_left
{
    position:relative;
    left:-20px;
}
h2.pos_right
{
    position:relative;
    left:20px;
}

4.absolute 定位

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:

h2.pos_top
{
    position:relative;
    top:-50px;
}

5.sticky 定位

sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。
position: sticky; 基于用户的滚动位置来定位。

div.sticky {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    background-color: green;
    border: 2px solid #4CAF50;
}

九、CSS溢出

当元素内容超过其指定的区域时，我们通过溢出overflow属性来处理这些溢出的部分。
溢出属性有一下几个值：

visible 默认值，溢出部分不被裁剪，在区域外面显示
hidden 裁剪溢出部分且不可见
scroll 裁剪溢出部分，但提供上下和左右滚动条供显示
auto 裁剪溢出部分，视情况提供滚动条

例如

html代码

<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>

css代码

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

在浏览器显示为
在这里插入图片描述

十、CSS浮动

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

<html>
<head>
  <style>
    .example-float-right {
      float: right;
    }
  </style>
</head>
<body>
  <img src="https://mdbootstrap.com/img/Photos/Others/placeholder1.jpg" class="example-float-right" alt="">
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quidem, architecto officiis, repellendus
  corporis obcaecati, et commodi quam vitae vel laudantium omnis incidunt repellat qui eveniet fugiat totam
  modi nam vero!</p>
</body>
</html>

在浏览器中浮动效果为
在这里插入图片描述

十一、CSS 图像透明度

CSS3中属性的透明度是 opacity。

例如

img
{
  opacity:0.4;
  filter:alpha(opacity=40); /* IE8 及其更早版本 */
}

我们还可以使用以下代码实现悬停效果

img
{
  opacity:0.4;
  filter:alpha(opacity=40); /*  IE8 及其更早版本 */
}
img:hover
{
  opacity:1.0;
  filter:alpha(opacity=100); /* IE8 及其更早版本 */
}

在这里插入图片描述

JustA-LoNg

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于CSS的学习记录

目录一、CSS简介二、CSS语法1.ID选择器2.class 选择器三、CSS样式表1.外部样式表2.内部样式表3.内联样式4.样式优先级四、CSS背景一、CSS简介CSS 指层叠样式表 (Cascading Style Sheets)。HTML 用于撰写页面的内容，而 CSS 将决定这些内容该如何在屏幕上呈现。样式通常存储在样式表中，外部样式表可以极大提高工作效率。可以说，CSS的出现，让网页的内容和样式代码从HTML中脱离了出来二、CSS语法一条CSS样式规则由两个主要的部分构成：选择器，以{
复制链接

扫一扫