前端自学笔记（CSS部分1）

最新推荐文章于 2024-08-22 14:15:11 发布

luna4433

最新推荐文章于 2024-08-22 14:15:11 发布

阅读量266

点赞数 1

文章标签： css css3 html html5 javascript

本文链接：https://blog.csdn.net/LANERGG/article/details/106987283

版权

前端学习笔记

CSS部分

一、CSS是什么

CSS是层叠样式表的简称，全称Cascading Style Sheets，也叫级联样式表或者CSS样式表。CSS和HTML一样，也是一种标记语言，CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。CSS 让我们的网页更加丰富多彩，布局更加灵活自如。简单理解：CSS 可以美化 HTML , 让 HTML 更漂亮，让页面布局更简单。CSS 最大价值: 由 HTML 专注去做结构呈现，样式交给 CSS，即结构 ( HTML ) 与样式( CSS ) 相分离。

二、CSS语法规范

CSS 规则由两个主要的部分构成：选择器以及一条或多条声明。
在这里插入图片描述

选择器是用于指定SCC样式的HTML标签，花括号里的是对该对象设置的具体样式。
属性和属性值是以键值对的形式出现的。
属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。
属性和属性值之间用英文“:”分开。
多个“键值对”之间用英文“;”进行区分，例如：
所有的样式，都包含在 <style> 标签内，表示是样式表。<style> 一般写到 </head> 上方

<head>
        <style>
            h4 {
                color: blue;
                font-size: 100px;
            }
        </style>
    </head>

三、CSS代码风格

样式格式书写
紧凑格式

h3 { color: deeppink;font-size: 20px;}

展开格式

h3 {
        color: pink;
        font-size: 20px;    
     }

个人比较推荐展开格式，因为看着更舒服。

样式大小写风格

小写格式

h3 {
            color: pink;
        }

大写格式

H3 {
            COLOR: PINK;   
        }

强烈推荐用小写格式听说后面就会强制小写了，现在都可以，小写格式看着也比较舒服。

样式空格风格

 h3 {
        color: pink;    
    }

属性值前面，冒号后面，保留一个空格，选择器（标签）和大括号中间保留空格。

四、CSS选择器的作用

选择标签用的
在这里插入图片描述
找到所有的 h1 标签。选择器（选对人）
设置这些标签的样式，比如颜色为红色（做对事）

五、CSS基础选择器

luna4433

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端自学笔记（CSS部分1）

前端学习笔记CSS部分一、CSS是什么CSS是层叠样式表的简称，全称Cascading Style Sheets，也叫级联样式表或者CSS样式表。CSS和HTML一样，也是一种标记语言，CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。CSS 让我们的网页更加丰富多彩，布局更加灵活自如。简单理解：CSS 可以美化 HTML , 让 HTML 更漂亮，让页面布局更简单。CSS 最大价值: 由 HTML 专注去做
复制链接

扫一扫