Web前端开发学习笔记（二）

最新推荐文章于 2021-11-02 14:31:29 发布

SkywalkerHD

最新推荐文章于 2021-11-02 14:31:29 发布

阅读量479

点赞数

分类专栏：学习笔记文章标签：前端 HTML/CSS

本文链接：https://blog.csdn.net/weixin_44363959/article/details/96423314

版权

学习笔记专栏收录该内容

19 篇文章 2 订阅

订阅专栏

Day 2

学习了html最基本的标签之后，紧接着就要学习CSS了，CSS作为本领域一个重要的内容，与html是相辅相成，缺一不可的。

课程内容

一、CSS（层叠样式表）
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

二、CSS的选择器

ID选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器，CSS 中 id 选择器以 “#” 来定义。

    <style>
        #text1{
            color: red;
        }
    </style>

效果为ID为text1的元素颜色设定为红色。

类选择器（class选择器）
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。class 选择器在HTML中以class属性表示，在 CSS 中，类选择器以一个点"."号显示。

    <style>
        .list{
            background: #f5f5f5;
        }
    </style>

效果为class类为list的所有元素背景色效果为红色。

标签选择器
标签选择器用来描述一个页面中所有相同标签的样式，在CSS中，标签选择器直接输入标签名即可，前面不需要加任何符号

    <style>
        ul li{
            list-style:none;
        }
    </style>

效果为所有ul无序列表以及列表项的样式为无

三、CSS的引入方式

行内样式
当样式仅需要在一个元素上应用一次时。要使用行内样式，又称为内联样式，需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。

<p style="text-align: center;color: red">
    今天天气不错
</p>

效果为该段落的文本位置为居中，颜色为红色

页面内样式
当单个文档需要特殊的样式时，可以使用页面内样式，又称内部样式表。用法是使用 < style> 标签在文档头部定义内部样式表。

<head>
<style>
	p{
	text-align: center;
   color: red
   }
</style>
</head>

效果为该文档中所有p标签段落的文本位置为居中，颜色为红色

外部样式表
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，可以通过改变一个文件来改变整个站点的外观。每个页面使用 < link> 标签链接到样式表。 < link> 标签在（文档的）头部。

<head>
<link rel=”stylesheet” type=”text/css” href=”../css/index.css”/>
</head>

样式优先级
行内样式>页面内样式>外部样式>浏览器自带样式

四、CSS常见样式

文本对齐方式
text-align:center；（居中） left（左对齐），right（右对齐），justify（两端对齐）；
字体
字体大小：font-size:20px；
字体：font-family: 黑体,宋体；
颜色
字体颜色：color:red；
背景颜色：background-color:green；
大小
宽度：width:100px；
高度：height:10px；
边框线
border:solid 1px #000；（线型，粗细，颜色）
border-left/border-right/border-top/border-bottom 左右上下
无边框线：border:none；
透明边框线：border:transparent；
背景
background:（可加，颜色背景图片）
背景重复：no-repeat 不重复 repeat-x 水平平铺 repeat-y 垂直平铺 repeat 重复
背景定位位置：水平：left center right 垂直：top center bottom
背景是否固定：background-attachment: fixed； //背景是否固定 fixed 固定 scroll 滚动
超链接
访问前状态：a:link
鼠标悬停时状态：a:hover
鼠标点击时的状态：a:active
超链接访问后的状态：a:visited
超链接下边线 /无/上边线：text-decoration:underline/none/overline；
特殊文本样式
文本中的每个单词以大写字母开头： text-transform: capitalize
定义仅有大写字母：uppercase
定义仅有小写字母：lowercase
首行缩进：text-indent:2em；
字母间距：word-spacing:10px；
不换行/默认空白浏览器忽略：white-space:nowarp/normal；
边距
margin：外边距
1个值表示上下左右的值
2个值第一个值表示上下，第二个值表示左右
3个值第一个值表示上，第二个值表示左右，第三个值表示下
4个值，上，右，下，左
Padding ：内填充
1个值表示上下左右的值
2个值第一个值表示上下，第二个值表示左右
3个值第一个值表示上，第二个值表示左右，第三个值表示下
4个值，上，右，下，左
浮动
元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动元素之后的元素将围绕它。浮动元素之前的元素将不会受到影响。如果图像是右浮动，下面的文本流将环绕在它左边。

img{
            float: left;
        }

表示img图片将会向左浮动。

列表样式
list-style-type：none；表示不使用项目符号
同理，当冒号后面属性为disc，则表示实心圆
circle：空心圆
square：实心方块
demical：阿拉伯数字
lower-alpha：小写英文字母
upper-alpha：大写英文字母
lower-roman：小写罗马数字
upper-roman：大写罗马数字

五、盒模型
所有HTML元素都可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

在这里插入图片描述

SkywalkerHD

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Web前端开发学习笔记（二）

Day 2学习了html最基本的标签之后，紧接着就要学习CSS了，CSS作为本领域一个重要的内容，与html是相辅相成，缺一不可的。课程内容一、CSS（层叠样式表）层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚...
复制链接

扫一扫