css学习笔记

最新推荐文章于 2024-07-21 19:13:42 发布

theboynoName

最新推荐文章于 2024-07-21 19:13:42 发布

阅读量136

点赞数

分类专栏：前端学习文章标签： css

本文链接：https://blog.csdn.net/qq_23274715/article/details/109623672

版权

前端学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

css学习笔记

CSS介绍

CSS指指层叠样式表(Cascading Style Sheets)。用来渲染html中的元素。

CSS的注释使用/* comment */
CSS对大小写不敏感。不过存在一个例外：如果涉及到与HTML文档一起工作的话，class和id名称对大小写是敏感的。
子元素从父元素继承属性。

CSS 规则由两个主要的部分构成：选择器,以及一条或多条属性声明。

div {
    text-align: center;
    border: 2px solid #a1a1a1;
    padding: 10px 40px;
}

/* 多组选择器公用一组声明 */
h1,h2,h3,h4,h5,h6 {
  color: green;
}

在css文件中导入其他的css文件:在css的文件开始地方使用@import path/name.css

html中如何调用CSS文件

外部样式表:当样式需要应用于很多页面时，外部样式表将是理想的选择使用<link>标签链接样式表:

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

内部样式表:当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用<style>标签在文档头部定义内部样式表:

<head>
<style type="text/css">
    hr {color: sienna;}
    p {margin-left: 20px;}
    body {background-image: url("images/back40.gif");}
</style>
</head>

内联样式:直接将CSS样式嵌入的html具体的元素属性中。内联样式会损失样式表优势。请慎用这种方法。使用元素的style属性嵌入样式表：

<p style="color: sienna; margin-left: 20px">This is a paragraph</p>

当这这三种样式被同时使用且属性冲突时，优先级为：内联样式 > 内部样式表 > 外部样式表

常见选择器

通用选择器: 用*来定义。对所有元素都起作用。

* {
    margin:0;
    padding:0;
}

id选择器: 以#来定义。id属性只能在每个HTML文档中出现一次.使用如下:

/* css中定义red id选择器 */
#red {
    color:red;
}
/* 在html中使用 */
<p id="red">这个段落是红色。</p>

在现代布局中，id选择器常常用于建立派生选择器。

类选择器: 类选择器使用.定义。拥有此选择器类的HTML元素都会被此选择器修饰。类名的第一个字符不能使用数字。

/* css中定义center 类选择器 */
.center {
    text-align: center;
}

/* 在html中使用 */
<h1 class="center">
    This heading will be center-aligned
</h1>

属性选择器: 使用[property]定义。可以为拥有指定属性的HTML元素设置样式，而不仅限于class和id属性。

/* 对所有拥有title属性的元素应用 */
[title] {
    color:red;
}

/* 对所有拥有title属性为的W3School元素应用 */
[title=W3School] {
    border:5px solid blue;
}

/* 对所有拥有title属性包含hello的元素应用 */
[title~=hello] { 
    color:red; 
}
/* 在html中使用 */
<h2 title="Hello world">Hello world</h2>

元素选择器: 为HTML元素设置样式。

h1 {
    color:red;
}

<h1>heading one</h1>

元素分组选择器: 为HTML元素设置样式。多组选择器公用一组声明

h1,h2,h3,h4,h5,h6 {
  color: green;
}

包含选择器: 是元素选择器的细化选择。表示为xx1元素中的xx2元素应用选择器中的属性。

h1 em {
    color:red;
}

子元素选择器: 也是元素选择器的细化选择。比包含选择器的范围更小。表示xx1元素中子元素为xxx2元素应用选择器中的属性.

h1 > strong {
    color:red;
}

什么是子元素:

<!-- 此时strong是h1的子元素 -->
<h1>
    <strong>
        very
    </strong> 
</h1>

<!-- 此时strong是em的子元素，是h1的子子元素 -->
<h1>
    <em>
        <strong>
            very
        </strong>
    </em> 
</h1>

相邻兄弟选择器: 也是元素选择器的细化选择。表示xx1元素的相邻兄弟xxx2元素应用选择器中的属性

h1 + p {
    margin-top:50px;
}

什么是相邻兄弟:

<!-- h1和第一个p元素为相邻兄弟元素 -->
<body>
<h1>This is a heading.</h1>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
</body>

伪类选择器: 使用:表示伪类。伪类存在的意义是为了通过选择器找到那些不存在与DOM树中的信息以及不能被常规CSS选择器获取到的信息。用于向某些选择器添加特殊的效果。可以配合class使用。如selector.class : pseudo-class {property: value}

a.red : visited {
    color: #FF0000
}

<a class="red" href="css_syntax.asp">CSS Syntax</a>

css中的常用伪类：

active:向被激活的元素添加样式。
focus:向拥有键盘输入焦点的元素添加样式。
hover:当鼠标悬浮在元素上方时，向元素添加样式。
link:向未被访问的链接添加样式。
visited:向已被访问的链接添加样式。
first-child:向元素的第一个子元素添加样式。
lang:向带有指定 lang 属性的元素添加样式。

伪元素选择器: 使用::表示伪元素.css中的常用伪元素：

first-letter:向文本的第一个字母添加特殊样式。
first-line:向文本的首行添加特殊样式。
before:在元素之前添加内容。
after:在元素之后添加内容。

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

css属性

背景属性:背景属性都不能继承.

background-color:背景颜色
background-image:背景图像.默认情况下此属性的图片会在页面的水平或者垂直方向平铺。使用background-repeat属性来修改。
background-repeat:背景重复
background-position:背景定位
background-attachment:背景关联
background-origin:规定背景图片的定位区域。(css3)
background-clip:规定背景的绘制区域。(css3)
background-size:规定背景图片的尺寸。(css3)

body{
    background-color:#b0c4de;
    background-image:url('paper.gif');
    background-repeat:repeat-x;
    background-attachment:fixed;
    background-size: auto;
}

overflow溢出属性:用于控制内容溢出元素框时显示的方式.

visable:正常显示
hidden：溢出隐藏
scroll:内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

文本属性:通过文本属性，您可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进等等

text-indent:文本缩进。可以继承
text-align:文本对齐
word-spacing:改变字（单词）之间的标准间隔
letter-spacing:字母之间的间隔
text-transform:处理文本的大小写
text-decoration:文本修饰，如下划线等
white-space:处理空白符。如多个合并为一个等
direction:设置文本的方向
line-height:每行文本的高度。行高可以设置为纯数字，表示相对于当前元素的字体大小。

字体属性:定义文本的字体系列、大小、加粗、风格（如斜体）和变形。继承

font-family:指定文本的字体系列
font-style:字体风格设置，如斜体设置
font-weight:加粗
font-size:字体大小设置

轮廓属性(outline):在元素的周围绘制的一条线，位于边框边缘的外围，可起到突出元素的作用

outline-color:
outline-style:
outline-width:

框属性:

padding:内边距(填充)属性。设置内边距间距
边框属性:
1. border-style:修饰边框的风格。如实线，虚线等。
2. border-width:边框的宽度。
3. border-color:边框的颜色。
4. border-radius:圆角边框(css3)
5. border-image:用图片来创建边框(css3)
margin:外边距属性。设置外边距间距
width:设置内容区的宽度
height:设置内容区的高度
box-shadow:方框添加阴影(css3)
box-sizing: 指定计算盒子宽高的参考。是否包括边框等。

2D转换:对元素进行移动、缩放、转动、拉长或拉伸。(css3)

translate():移动元素
rotate():元素旋转一定的角度
scale():元素尺寸会增加或减少
skew():元素翻转给定的角度
matrix():所有2D转换方法组合在一起

3D转换:
过渡:元素从一种样式逐渐改变为另一种的效果.

transition:

动画:

div{
    animation: myfirst 5s;
}

@keyframes myfirst{
    0%   {background: red; left:0px; top:0px;}
    25%  {background: yellow; left:200px; top:0px;}
    50%  {background: blue; left:200px; top:200px;}
    75%  {background: green; left:0px; top:200px;}
    100% {background: red; left:0px; top:0px;}
}

多列:能够创建多个列来对文本进行布局.就像报纸那样.

column-count:规定元素应该被分隔的列数
column-gap:属性规定列之间的间隔
column-rule: 属性设置列之间的宽度、样式和颜色规则

用户界面相关属性：新的用户界面特性包括重设元素尺寸、盒尺寸以及轮廓等

resize:
box-sizing:修改盒子的宽高计算方式。
outline-offset:

盒模型

box(盒子):每个元素在页面中都会生成一个矩形区域，简称盒子。盒子有如下几种类型:

行盒:display属性值为inline的元素。
块盒:dispaly属性为block的元素。
行块盒:dispaly属性为inline-block的元素。有行盒和块盒的属性。

区别：行盒在页面中不换行，块盒独占一行。行盒跟着内容走。所以行盒不能设置宽高。

CSS布局

视觉格式化模型(布局规则)：页面中多个盒子的排列规则。大体上将页面中盒子的排列分为三种方式：

常规流
浮动
定位

常规流

常规流总体规则：块盒独占一行，行盒水平一次排列。
包含块(containing block):每个盒子都有它的包含块，包含块决定了盒子的排列区域。大多数情况下，包含块为父元素的内容盒。

注意事项与技巧：

在常规流中，块盒在其包含块中居中方式：先定宽，然后左右margain=auto.
百分比取值:pading,margain,width属性的百分比相对于相对于包含块的宽度。
两个常规流块盒，会合并上下相邻的外边距。合并规则为取其最大值

浮动

使用属性float来设置盒子的浮动属性,它有如下属性值：

left:左浮动：元素靠上靠左。
right:右浮动，元素靠上靠右。
默认：无浮动

浮动中的元素都为块盒。盒子排列规则:

左浮动的盒子靠上靠左排列
右浮动的盒子靠上靠右排列
浮动盒子在包含块中排列时，会避开常规流盒子。
常规流盒子在配列时，无视浮动盒子。
行盒在配列时会避开浮动盒子
外边距合并不会发生。

应用场景：文字环绕，横向排列。

盒子尺寸：

当宽度为auto时，适应内容宽度。如内容为空时，大小为0.
高度为auto时，适应内容高度。
margin为auto时，为0.
边框、内边距等的百分比设置与常规流相同

高度坍塌:常规流盒子的自动高度在计算时不考虑浮动盒子，只考虑常规流盒子的内容高度。解决方法:

使用css的clear属性进行浮动清除。

使用伪元素after。

    .clearfix::after {
    content: "";
    display: block;
    clear: both;
}

定位

定位用到的属性为position,他有如下一些属性值:

static:默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）
relative :生成相对定位的元素，相对于其正常位置进行定位。因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。它的偏移不会对其他元素造成任何影响。它主要用于给决定定位提供包含块。
absolute :生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
fixed:生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。它主要用于广告等窗口滚动时，它也不会变化。

一个元素只要position属性不是static,它就是定位元素，定位元素会脱离文档流(static属性值除外)。文档流中的元素摆放时，会忽略脱离了文档流的元素。文档流中元素计算自动高度时，会忽略脱离了文档流的元素。

<div style = "position: relative;width: 400px;height: 200px; border: 2px solid;">
    <div style = "position: absolute; left: 20px;width: 100px;height: 50px; border: 2px solid red;"></div>
    <div style = "position: fixed; left: 40px;width: 100px;height: 50px; border: 2px solid blue;"></div>
</div>

绝对定位和固定定位的居中策略：
先定宽高，然后设置上下(左右)距离为0，margain = auto.

多个定位重叠时：设置z-index来确定重叠元素的前后。值越大，越在前。z-index可以是负数，此时遇到常规流元素以及浮动元素会被其覆盖。z-index只对定位元素有效。

决定定位、固定定位元素一定是块盒，且一定不会浮动。没有外边距合并。

ition: absolute; left: 20px;width: 100px;height: 50px; border: 2px solid red;">

```

绝对定位和固定定位的居中策略：
先定宽高，然后设置上下(左右)距离为0，margain = auto.

决定定位、固定定位元素一定是块盒，且一定不会浮动。没有外边距合并。

关于技术交流

此处后的文字已经和题目内容无关，可以不看。
qq群:825695030
微信公众号:嵌入式的日常
如果上面的文章对你有用，欢迎打赏、点赞、评论。二维码

theboynoName

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
css学习笔记

css学习笔记相关学习网站:W3C: https://www.w3school.com.cn腾讯课堂视频讲解:https://ke.qq.com/course/414780?taid=3622731900146748官方参考手册MDN:https://developer.mozilla.org/zh-CN/docs/Web/CSSCSS介绍CSS指指层叠样式表(Cascading Style Sheets)。用来渲染html中的元素。CSS的注释使用/* comment */CSS对大小
复制链接

扫一扫