暑假自学css笔记

m0_75048134

已于 2024-07-21 02:50:54 修改

阅读量145

点赞数 3

文章标签：笔记

于 2024-07-08 18:31:23 首次发布

本文链接：https://blog.csdn.net/m0_75048134/article/details/140275964

版权

以下关于暑假每日css学习进度更新

24.7.8

格式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            color: red;
            /* 修改文字颜色 */
            font-size: 20px;
            /* 修改文字大小 */
        }
    </style>
</head>

<body>
    <p>陆沉</p>
</body>

</html>

css基础选择器（由单个选择器组成）

24.7.14

1.标签选择器

<style>
  p{
        color: green;
  }
</style>
<!--所有标签为p的字都变成绿色-->

2.类选择器（单独选择一个或者几个标签）

<head>
  <style>
/*口诀：样式点定义，结构类调用*/

    .star-sing{
           color:red;
        }
  </style>


</head>
<body>
  <ul>
    <li class="star-sing">xx</li>
    <li>xxx</li>
  </ul>
  <div class="star-sing">xxxx</div>


</body>

3.类选择器-多类名

需要用空格分开

4.id选择器

<head>
  <style>
/*口诀：样式#定义，结构id用，只能用一次*/

    #star-sing{
           color:red;
        }
  </style>


</head>
<body>
  
  <div id="star-sing">xxxx</div>


</body>

5.通配符选择器

<head>
  <style>

   *{
           color:red;
        }
/*body里边的全部都变*/
  </style>


</head>
<body>
  
  <div>xxxx</div>


</body>

css字体属性

字体：font-family："Microsoft yahei"

字体大小：font-size（单位px）

字体粗细：font-weight:normal（400）、bold（700）、bolder、lighter、number（最提倡）

文字样式：font-style：italic（倾斜）、normal（倾斜的字体正回来）

简写（顺序不可乱）

文本属性

1.文本颜色color：预定义颜色值（red、green）、十六进制、rgb代码

2.文本对齐text-align：center、right、left

3.装饰文本text-decoration：none（无装饰线）、underline、overline、line-through（删除线）

4.文本缩进text-indent：2em（当前元素缩进两个字的大小）

5.行间距line-height：控制行与行之间的距离

css引入方式

1.内部样式表（以上所用格式）

2.行内样式表

3.外部样式表（单独写css文件）

Emmet语法

css复合选择器

1.后代选择器

ul li{}

2.子选择器

.nav > a{}
/*只会选nav的儿子a进行操作*/

3.并集选择器

p，div,.pig.li{}

4.伪类选择器

链接伪类选择器（lvha不可以颠倒顺序）

4.focus伪类选择器（谁获得光标谁变色）

24.7.15

css元素显示模式

1.html元素一般分为块元素（包含任何标签）和行内元素(容纳文本和行内元素）

文字元素和行内元素内不能放块元素

2.行内块元素（<img/>,<input/>,<td>）

元素显示模式转换

1.行内元素转换成块元素

转换元素口令：display：block；

2.块元素转换为行内元素

转换元素口令：display：inline；

3.转换为行内块

转换元素口令：display：inline-block；

css背景

1.背景颜色

background-color

2.背景图片（便于控制位置）

background-image：url（地址）；

3.背景平铺

background-repeat：no-repeat；（不平铺）

4.背景图片位置

background-position：x y；

方位名词

left，right，center，top

精确单位

具体数字20px 50px

没写默认居中（只写一个默认是x的）

混合单位

5.背景图像固定

backgroud-attachment：；

6.背景颜色半透明

backgrooud：rgba（0，0，0，0.3）；

第四个数在0~1之间为透明度选择

css三大特性

1.层叠性

冲突的特性就近原则

2.继承性

3.优先级

同级就近原则

继承的权重是0，所以就算有important也是会被元素选择器覆盖的

ul li{}
li{}
<!--复合选择器会有权重叠加的问题，ul li权重更大0，0，0，1+0，0，0，1>0,0,0,1-->

盒子模型

组成：border边框，content内容，padding内边距，margin外边距

1.border边框px

边框样式：solid实线边框，dashed虚线边框，dotted点线边框

border-collapse：collapse；（表格细线合并）

2.padding内边距

padding会影响盒子大小

7.16去看电影吃海底捞了

24.7.17

padding盒子本身没有指定h/w属性，padding不会撑大盒子

3.margin外边距

对于父子嵌套父亲塌陷问题（就是子的边框距离影响了父）

4.清除内外边距

去掉ul中li前面的小圆点

li {
            list-style: none;
        }

圆角边框

border-radius：lenth;
<!--lenth为半径（px）/xx%-->

盒子阴影

文字阴影

css浮动

网页布局由三种方式组成：标准流（多个块级元素列向排列用）、浮动（多个块级元素横向排列用）、定位

浮动的特性

ps：如果四个div盒子原来是成列分布，如果第一个盒子设置浮动，那么剩下的都会成行分布，行不够放盒子盒子会自动下移一行

ps：通常盒子不可能完全贴着屏幕左右，是偏向于居中的，为此需要先在屏幕中央放一个大盒子（注意权重问题）

清除浮动（父盒子中的子盒子如果浮动，在父盒子没有设置高度的前提下，父盒子的高度会变成零，此时下边的标准流会被移动在子盒子下，所以我们要清除浮动）

必须是块级元素

在父盒子里边添加

3.clearfix加载父盒子的class直接用就行

p186

24.7.18

3.双伪元素清除浮动


		.clearfix:before,
		.clearfix:after {
			content: "";
			display: table;
		}
		.clearfix:after {
			clear: both;
		}
		.clearfix {
			*zoom: 1;
		}

css属性书写顺序