CSS学习总结_学习css总结-CSDN博客

本文链接：https://blog.csdn.net/qq_46598709/article/details/117930683

CSS学习总结

CSS 简介

CSS是级联样式表（Cascading Style Sheets）的缩写。HTML 用于撰写页面的内容，而 CSS 将决定这些内容该如何在屏幕上呈现。

网页的内容是由 HTML的元素构建的，这些元素如何呈现，涉及许多方面，如整个页面的布局，元素的位置、距离、颜色、大小、是否显示、是否浮动、透明度等等。

CSS语法

CSS主要由两个部分组成：选择器和一条或多条声明。
选择器就是需要改变样式的html元素。每条声明由一个属性和一个值组成，属性是设置的样式属性（style attribute），每个属性都有一个值，属性和值用冒号分隔。如：

 <style type="text/css"> 
            p {
                color:blue;
                background:cadetblue;
            } 
            body {
                background-image: url("img/src=http___hbimg.b0.upaiyun.com_86b12c7e609be91a9cd7944051077197cb5ba31e5aebb-GdJSEV_fw658&refer=http___hbimg.b0.upaiyun.jpg");
                 } /*设置body背景图片 */
        </style>

CSS的三种样式

css有三种书写方式分别为：

外部样式。
内部样式。
内联样式。

一.外部样式的书写方法

 <link rel="stylesheet" type="text/css" href="styles.css">
   p {
    color:blue;
    background:cadetblue;
} 
body {
    background-image: url("img/u=3355464299\,584008140&fm=26&fmt=auto&gp=0.webp");
     } /*设置body背景图片 */

二.内部样式的书写方法

<style type="text/css"> 
            p {
                color:blue;
                background:cadetblue;
            } 
            body {
                background-image: url("img/src=http___hbimg.b0.upaiyun.com_86b12c7e609be91a9cd7944051077197cb5ba31e5aebb-GdJSEV_fw658&refer=http___hbimg.b0.upaiyun.jpg");
                 } /*设置body背景图片 */
        </style>  
        <style media="screen and (min-width:512px) and (max-width:1024px)" >
            body{
                background-image: url(img/u=3355464299\,584008140&fm=26&fmt=auto&gp=0.webp);
            }
              /* 设置页面宽度在512到1024像素是切换背景图片 */
        </style>

三.内联样式的书写方法

<h3 style="color:green;">I am a heading</h3>

CSS中的文字效果

1.颜色属性

颜色的表示也有两种方式，分别是

用表示颜色的单词改变样式。

<h3 style="background-color:Tomato;">Tomato</h3>
<h3 style="background-color:Orange;">Orange</h3>
<h3 style="background-color:DodgerBlue;">DodgerBlue</h3>

颜色RGB16进制值。

<h3 style="background-color:#ff0000;">#ff0000</h3>
<h3 style="background-color:#0000ff;">#0000ff</h3>
<h3 style="background-color:#3cb371;">#3cb371</h3>

2.段落文字

水平对齐方式:text-align控制
垂直对齐方式:vertical-align控制
行间距和字间距:line-height控制
首字下沉:float控制

盒子模型

盒子模型指的是一个 HTML 元素可以看作一个盒子。从内到外，这个盒子是由内容 content, 内边距 padding, 边框 border, 外边距 margin构成的。

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

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

伪类和伪元素

伪类（pseudo-class）或伪元素（pseudo-element）用于定义元素的某种特定的状态或位置等。
比如我们可能有这样的需求：

鼠标移到某元素上变换背景颜色
超链接访问前后访问后样式不同
离开必须填写的输入框时出现红色的外框进行警示
保证段落的第一行加粗，其它正常
…

使用伪类/伪元素的语法如下：

selector:pseudo-class/pseudo-element {
  property:value;

…

总结

没学css之前制作的网页是非常丑陋的，没有布局，没有格式，在学习了css过后，各种元素的格式我都能通过选择器对他进行修改，这样可以使网页更为美观。但是在学习css的过程当中，也让我知道css是很难的，需要通过大量的练习才能熟练运用这些知识，这需要慢慢积累才行。