CSS文档笔记

最新推荐文章于 2024-05-29 09:20:13 发布

GET_HOSE_UPtrack

最新推荐文章于 2024-05-29 09:20:13 发布

阅读量578

点赞数

分类专栏：笔记文章标签： css 前端 html

本文链接：https://blog.csdn.net/GET_HOSE_UPtrack/article/details/126691495

版权

笔记专栏收录该内容

17 篇文章 0 订阅

订阅专栏

CSS笔记

文章目录

CSS笔记
css的引入方式
CSS3新增属性
浮动`float`
- - 传统网页三种布局方式
精灵图
字体图标 iconfont

CSS代码风格

1.0  紧凑型
h1 {color: aliceblue;font-size: 20px;}
1.1 展开格式
h1 {
    color: aliceblue;
    font-size: 20px;
}

2.0 样式大小写强烈建议样式选择器、属性名、属性值关键字全部使用小写字母，特殊情况除外

h1 {
    color: aliceblue;
    font-size: 20px;
}

3.0 空格规范

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

h1{
    color: aliceblue;
    font-size: 20px;
}

CSS基础选择器

标签选择器

标签选择器是指用html标签名作为选择器 按标签名称分类，为页面中某一类标签指定统一的css样式。

标签名 {
    属性1: 属性值1;
    属性2: 属性值2;
    ...: ...;
}

类选择器

类选择器可以单独选择一个或某几个标签

<p class="red">这是一个段落</p>
<!-- 类名是自定义的 -->
/* 类选择器可以被多个标签调用 */
.red {
    color: red;
}

Web前端开发规范手册

类选择器-多类名：可以给一个标签指定多个类名

<!-- 两个类名之间用空格隔开 -->
<div class="red font35">HELLO WORD!</div>
.red {
    color: red;
}
.font35 {
    font-size: 35px;
}

id选择器

html以id属性来设置id选择器 css中id选择器以“#”来定义， 一个HTML元素只能有一个id属性。且同一个id属性一个页面内只能出现一次

<div id="red">HELLO WORD!</div>
#red {
    color: red;
}

通配符选择器

css中通配符选择器使用‘*定义’，它表示选取页面中所有的元素（标签）

* {
    color: red;
}

通配符选择器不需要调用，自动给所有元素使用样式
特殊情况才会使用 （清除所有元素的内外边距）

基础选择器总结

基础选择器	作用	特点
标签选择器	可以选出所有相同的标签	不能差异化选择
类选择器	可以选出一个或多个标签	可以根据需求选择
id选择器	一次只能选择一个标签	一次只能选择一个标签
通配符选择器	选择所有标签	选择的太多，有部分不需要

CSS字体属性

字体系列

css通过font-family属性设置字体系列

p {
    font-family: "微软雅黑";
}

font-family的属性值可以有多个，且多个属性值之间用逗号（英文逗号）隔开。
如果有空格隔开的多个单词组成的字体，要用引号包括起来。
设置多个字体后，若用户浏览器没有第一个字体，则引用第二个字体，以此类推，若都没有则使用默认字体。

css使用font-size设置字体大小。

p {
    font-size: 35px;
}

px(像素)是网页中常用的单位
谷歌浏览器默认为16px。

字体粗细

css使用font-weight设置字体粗细。

p {
    font-weight: 700;
}

属性值	描述
normal	默认值（不加粗的）
bold	定义粗体（加粗的）
100-900	400等同于normal 700 等同于bold 数字后面不跟单位

文字样式

css使用font-style设置文本风格。

p {
    font-style: normal;
}

属性值	描述
normal	默认值（标准字体样式）
italic	浏览器会显示斜体的字体样式。

font的复合属性写法

p {
    /* font-style: normal;
    font-weight: 700;
    font-size: 36px;
    font-family: "微软雅黑";
    line-height: 20px;*/
    /* 复合属性简写方式 */
    /* font: font-style font-weight font-size/line-height font-family; */
    font: normal 700 36px/20px "微软雅黑";
}

使用font属性时必须按照语法格式书写，不能更换顺序，并且各属性之间用空格隔开。
不需要设置的属性可以省略，但必须保留font-size和font-family属性，否则font属性将不起作用。

CSS文本属性

文本颜色

color属性用于定义文本的颜色。
div {
    color: red;
}

表示	属性值
预定义的颜色值	red、green、blue等
十六进制	#ff0000等
RGB代码	rgb(255,255,0)或rgb(100%,100%,0)

对齐文本

text-align属性用于设置元素内文本内容的水平对齐方式。
div {
    text-align: center;
}

属性值	解释
left	左对齐
center	居中对齐
right	右对齐

装饰文本

text-decoration规定添加到文本的修饰

属性值	解释
none	默认没有装饰线
underline	下划线
overline	上划线
line-through	删除线

文本缩进

text-indent属性用来指定文本的第一行缩进，通常是将段落的首行缩进。

1em相当于一个文字大小

行间距

text-indent用于设置行间的距离即行高，属性值为数字+px

css的引入方式

行内样式（行内式）

在标签的style属性内设置CSS样式
<p style="color: red;font-size: 25px;">sdjhgf</p>

内部样式表（嵌入式）

<style>
    div {
        color: red;
    }
</style>
style标签理论上可以放在网页任何位置，但一般放在head标签内

外部样式表（连接式）

样式单独写到css文件中然后引入到HTML页面内。
 <link rel="stylesheet" href="style.css">

复合选择器

后代选择器
1. 按照层级选择，层层递进
2. 元素一必须是父级，元素二必须是子集。
3. 两个元素之间用空格隔开
```
ol li {
    color: red;
}
```
子选择器
1. 被父级包含的所有子元素都可以直接选择，不需要层层选择
```
    div > li {
        color: red;
    }
```

并集选择器

可以选择多组标签，并且为他们定义相同的样式。

        <div class="host">
            <ul>
                <li class="one"><a href="">a标签</a></li>
                <li class="two"><a href="">a标签</a></li>
                <li class="sree"><a href="">a标签</a></li>
            </ul>
        </div>
        <style>
            one,sree{
                color: red;
            }
        </style>

区别

 <div class="host">
    <ul>
        <li class="one"><a href="">a标签</a></li>
        <li class="two"><a href="">a标签</a></li>
        <li class="sree"><a href="">a标签</a></li>
       </ul>
  </div>
/*后代选择器*/
.host ul li a {
    color: red;
}
/* 子元素选择器 */
.host > a {
    color: red; 
}

伪类选择器

链接伪类选择器
1. a:link 选择所有未被访问的链接
2. a:visited 选择所有已被访问的连接
3. a:hover 选择鼠标指针位于其上的链接
4. a:active 选择活动链接（鼠标按下还未弹起的链接）
  在开发时必须按照link visited hover active 的顺序书写代码
:focus伪类选择器用于选取获得焦点的表单元素。

<a href="#">腾讯</a> 
  <input type="text" name="sc" id="ds">
 a:link {
       color: #333;
       font-weight: 700;
       font-size: 36px;
       text-decoration: none;
     }
     a:visited {
       color: orange;
     }
     a:hover {
       color: blueviolet;
     }
     a:active {
       color: aqua;
     }
     input:focus {
       background-color: yellowgreen;
       color: blueviolet;
     }

元素的显示模式

块级元素 独占一行

常见的块级元素有h1 - h6 , p , div , ul , ol , li 等
- 块级元素的宽高内外边距都可以控制。
- 宽度默认是父级元素宽度的100%。
- 是一个容器既盒子，里面可以放行内或块级元素。
行内元素（内联元素）
- 相邻的行内元素在一行上可以显示多个。
- 直接设置宽高是无效的。
- 默认的宽度是本身内容的宽度。
- 行内元素只能容纳文本或其他行内元素。
行内块元素 同时具有块级元素和行内元素的特点
- 和相邻行内元素在一行上但他们之间会有空白缝隙，一行可以显示多个。
- 默认的宽度就是他们本身内容的宽度。
- 宽高、行高以及内外边距都可以控制。
显示模式的转换

display属性用于css的显示模式转换

属性值	作用
block	转换为块级元素
inline	转换为行内元素
inline-block	转换为行内块元素

单行文字垂直居中

当文字行高等于盒子的高度时文字能实现垂直居中。
div {
    height: 30px;
    line-height: 30px;
}

CSS背景

背景颜色

默认的背景颜色为transparent透明色

    div {
        background-color: 颜色值;
    }

背景图片

background-image: url();

属性值作用
none 默认没有背景图片
url() 使用相对或绝对路径指定背景图片
1. 背景平铺
  
  background-repeat: repeat | no-repeat | repeat-x| repeat-y;
  
  属性值作用
  repeat 在纵向和横向上平铺
  no-repeat 不平铺
  repeat-x 在横向上平铺
  repeat-y 在纵向上平铺
背景颜色和背景图片可以一起使用，背景颜色在最底层背景图片在上一层。
背景图片的位置

background-position: x y;属性可以改变图片在背景中的位置
x , y 代表的是坐标位置

属性值说明
length 百分数或浮点数和单位组成的长度值
position top 、center、bottom、left、center、right 方位名词
- 方位名词顺序无所谓
- 如果只写一个另一个则默认居中。
- length与position可以搭配使用
背景图像固定

background-attachment: fixed | scroll;属性设置背景图片是否固定或随着页面的其余部分滚动。

属性值作用
fixed 背景图像固定
scroll 背景图像随着对象内容滚动
背景的复合写法

属性值	作用
none	默认没有背景图片
url()	使用相对或绝对路径指定背景图片

属性值	作用
repeat	在纵向和横向上平铺
no-repeat	不平铺
repeat-x	在横向上平铺
repeat-y	在纵向上平铺

属性值	说明
length	百分数或浮点数和单位组成的长度值
position	top 、center、bottom、left、center、right 方位名词

属性值	作用
fixed	背景图像固定
scroll	背景图像随着对象内容滚动

background:背景颜色背景图片地址背景平铺背景图像滚动背景图像的位置;

背景色半透明
background-color: rgba(0, 0, 0, 0.3); 最后一位是透明度
- CSS3新增属性，IE9+版本才有用
- 背景半透明是指盒子背景颜色半透明，内容不受影响。

CSS三大特性

层叠性

给相同的选择器设置相同的样式，此时一个样式就会覆盖另一个冲突的样式
- 样式冲突：遵循就近原则，那个样式离结构近就执行那个样式。
- 样式不冲突，不会层叠。
继承性

子标签会继承父标签的某些样式，如文本的颜色字号。
- 恰当的使用继承可以简化代码，降低CSS样式的复杂性。
- 子元素可以继承父元素的样式（text- 、 font- 、 line- 、这些元素开头的可以继承，以及color属性）
- 行高的继承

优先级

当同一个元素被指定多个选择器，就会有优先级产生。

选择器相同，则执行层叠性。
选择器不同，则根据选择器权重执行。
权重叠加： 如果是复合选择器，则会有权重叠加，需要计算权重。

选择器	选择器权重
继承或者*	0，0，0，0
元素选择器	0，0，0，1
类选择器、伪类选择器	0，0，1，0
id选择器	0，1，0，0
行内样式、style=“”	1，0，0，0
!important 重要的	无穷大

盒子模型 `把html页面中的布局元素看作一个矩形盒子，封装周围的HTML元素，它包括边框、内外边距、实际内容。`

border: border-width || border-style || border-color ;

盒子模型–边框（border）

边框宽度border-width
边框样式boeder-style

属性值	效果
none	定义无边框。
hidden	与 “none” 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突
dotted	定义点状边框。在大多数浏览器中呈现为实线
dashed	定义虚线。在大多数浏览器中呈现为实线
solid	定义实线
double	定义双线。双线的宽度等于 border-width 的值。
groove	定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge	定义 3D 垄状边框。其效果取决于 border-color 的值。
inset	定义 3D inset 边框。其效果取决于 border-color 的值。
outset	定义 3D outset 边框。其效果取决于 border-color 的值。
inherit	规定应该从父元素继承边框样式。

边框颜色 border-color

表格的细线边框border-collapse 属性控制浏览器绘制表格边框的方式。它控制相邻两个单元格的边框

border-collapse:collapse; //该属性作用与table

盒子模型–内边距padding属性用于设置内边距，即边框与内容之间的距离。

属性	作用
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距

/* padding简写 */
padding：5px; //上下左右都是5px
padding：5px 10px;  //上下5px 左右10px
padding：5px 10px 20px ;  //上5 左右10  下20px
padding：5px 10px 20px 30px;  //上5px 右10px 下20px 左30px

盒子模型–外边距 margin属性用于设置外边距，即盒子与盒子之间的距离。

属性	作用
margin-left	左外边距
margin-right	右外边距
margin-top	上外边距
margin-bottom	下外边距
1.块级元素水平居中

盒子必须指定了宽度。
盒子的左右外边距都设置为auto

最常用的写法margin: 0 auto;

行内元素和行内块元素的水平居中给其父元素添加text-align:center;

2.外边距合并

相邻块元素垂直外边距会合并，并以最大的外边距为准。

解决方法：尽量只给一个盒子添加margin值。

嵌套块元素垂直外边距的塌陷对于两个嵌套的块级元素，父元素上有外边距同时子元素上也有外边距，此时父子元素会合并，并以最大的为准。

解决方法：

可以为父元素添加边框
可以为父元素定义内边距。
可以为父元素添加overflow:hidden;
浮动、固定、绝对定位的盒子不会有塌陷问题

CSS3新增属性

圆角边框

border-radius属性用于设置元素的外边框圆角

属性值	作用
正方形50%、width\height的一半	圆形
长方体宽或高的一半	圆角矩形

盒子阴影box-shadow

box-shadow: h-shadow v-shadow blur spread color inset ;

属性值	描述
h-shadow	必须，水平阴影的位置，允许负值
v-shadow	必须，垂直阴影的位置，允许负值
blur	可选，模糊距离。
spread	可选，阴影尺寸
color	可选阴影的颜色
inset	可选，将外部阴影（outset）改为内部阴影

文字阴影text-shadow

text-shadow: h-shadow v-shadow blur color ;

属性值	描述
h-shadow	必须，水平阴影的位置，允许负值
v-shadow	必须，垂直阴影的位置，允许负值
blur	可选，模糊距离。
color	可选阴影的颜色

浮动`float`

float属性用于创建浮动框，将其移动到一边，直到左右边缘触及到包含块或者另一个浮动边框的边缘。

属性值	描述
none	元素不浮动（默认值）
left	元素向左浮动
right	元素向右浮动

传统网页三种布局方式

标准流（普通流/文档流）
所谓标准流就是标签按照规定好默认方式排列

浮动
浮动的特性会脱离文档流

清除浮动
清除浮动的本质就是清除浮动元素造成的影响

如果父元素本身有高度，则不需要清除浮动

清除浮动的方法
- 额外标签法也称之为隔墙法，是W3C推荐的做法。
  在最后一个浮动元素的后面添加一个额外的标签，并添加清除浮动样式

选择器 {
   clear: 属性值;
}

父级添加 overflow 属性。

  父元素 {
      overflow: hidden;
      //overflow属性会有溢出隐藏的特性
  }

父级添加 after 伪元素 :after。

父元素:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
父元素 {
  /*IE6、IE7专有*/
  *zoom: 1;
}

父级添加双伪元素。

  父元素:before,父元素:after {
      content: "";
      display: table;
  }
  父元素:after {
      clear: both;
  }
  父元素 {
  /*IE6、IE7专有*/
  *zoom: 1;
}

属性值	作用
left	清除左侧浮动的影响
right	清除右侧浮动的影响
both	同时清除左右两侧浮动的影响

定位
1. 静态定位（static）默认的定位方式，无定位的意思
2. 相对定位（ relative ）元素在移动位置的时候，是相对它原来的位置来说的。
  原来在标准流中的位置继续保留，后面的元素依旧以标准流的方式对待他。
```
 选择器 {
     position: relative;
     top: 100px;
     left: 100px; 
 }
```
1. 绝对定位（ absolute ）1元素在移动位置的时候，是依据它的祖先级元素来说的。
  - 如果没有祖先元素，或者祖先元素没有定位，则以浏览器为准定位。
  - 如果祖先元素有定位，则以最近一级的有定位的祖先元素为参考点移动位置。
  - 绝对定位的盒子不占有原先的位置。
2. 固定定位（ fixed ）固定定位是元素固定与浏览器可视区域的位置。
  - 以浏览器的可视参考点移动元素。不随滚动条滚动。
  - 固定定位不在占有原先的位置。
```
 /*固定定位的盒子靠版心右侧**/
 left: 50%;
 margin-left: 版心的一半;
```
3. 粘性定位（ sticky ）粘性定位可以被理解为相对定位和固定定位的混合。
  - 以浏览器的可视参考点移动元素。
  - 粘性定位占有原先的位置。
  - 必须添加 top 、left 、right 、bottom 中的一个才有效。
  - 和页面滚动搭配使用。兼容性较差、IE不支持使用。
定位的叠放次序（z-index ）

      选择器 {
          z-index: 0;
      }

数值可以是正整数负整数和0，默认是auto、数值越大，盒子越靠上。
如果属性相同，则按照书写顺序，后来居上。
数字后面不能加单位。
只有定位盒子有z-index属性。

绝对定位盒子的居中

     选择器 {
          left: 50%;
          margin-left: -自身宽度的一半;
      }

定位的特性
1. 行内元素添加绝对或固定定位、可以直接设置高度和宽度。
2. 块级元素添加绝对或固定定位、如果不给宽度或高度默认大小是内容的大小。
3. 脱标的盒子不会触发外边距塌陷。
4. 绝对定位或固定定位会完全压住盒子。浮动元素不同、只会压住下面标准流的盒子，但不会压住下面标准流盒子里面的文字（图片）。

显示与隐藏

display属性

属性值	作用
none	隐藏对象
block	除了转换为块级元素之外，同时还有显示元素的意思

元素隐藏后不在占有原来的位置。

visibility 可见性 用于指定一个元素可见还是隐藏。

属性值	作用
visible	元素可视
hidden	元素隐藏

元素隐藏之后继续占有原来的位置。

overflow 溢出隐藏

属性值	作用
visible	不剪切内容也不添加滚动条
hidden	不显示超过对象尺寸的内容，超出部分隐藏
scroll	不管是否超出内容、总显示滚动条
auto	超出自动显示滚动条，不超出不显示滚动条

精灵图

精灵图：为了有效地减少服务器接受和发送请求的次数，提高网页的加载速度

精灵技术主要针对于背景图片的使用。就是把多个小背景整合到一张大图上然后通过background-position: -183px 0px;属性调整位置。
精灵图主要针对于小的背景图片使用。
一般情况下精灵图都是负值。（x轴右边走是正值，左边走是负值。y轴同理）

字体图标 iconfont

展示的是图标、本质上是字体。

特点
- 轻量级：一个字体图标要比一系列的图像小。一旦字体加载了，图标就会马上渲染出来、减少了服务器的请求。
- 灵活性：本质上其实是文字，可以很随意的改变颜色、产生阴影等效果。
- 兼容性：几乎支持所有的浏览器。
下载
- icomoon字库 http://icomoon.io
- 阿里iconfont字库 http://www.iconfont.cn

使用

    <style>
    @font-face {
        font-family: 'icomoon';
        src:  url('../fonts/icomoon.eot?188szq');
        src:  url('../fonts/icomoon.eot?188szq#iefix') format('embedded-opentype'),
        url('../fonts/icomoon.ttf?188szq') format('truetype'),
        url('../fonts/icomoon.woff?188szq') format('woff'),
        url('../fonts/icomoon.svg?188szq#icomoon') format('svg');
        font-weight: normal;
        font-style: normal;
        font-display: block;
        }
        span{
            font-family: 'icomoon';
        }
</style>

</head>
<body>
    <span></span>
</body>

CSS三角

选择器 {
    width:0;
    height:0;
    border-top:10px solid red;
    border-left:10px solid black;
    border-right:10px solid green;
    border-bottom:10px solid blue; 
}

CSS用户界面样式

鼠标样式（ cursor ）

属性值	描述
default	小白、默认
pointer	小手
move	移动
text	文本
not-allowed	禁止

2. 轮廓线（ outline ）`给表单添加outline:0;或者outline: none;样式后，就可以去掉默认的蓝色边框。`
3. 防止拖拽文本域 （ resize: none; ）`防止文本域被拖拽改变大小。`

2D转换–移动transform:

transform: translate(x,y);

定义2D转换中的移动，沿着X轴和Y轴移动元素。
translate的最大优点，不会影响其他元素
translate中的百分比是相对自生元素的
对行内标签没有效果。

2D转换–旋转rotate

transform: rotate(deg);

rotate里面跟度数，单位时deg
角度为正时，顺时针。为负时，逆时针。
默认旋转的中心点是元素的中心点。

2D转换–旋转中心点设置

transform-origin: left center;

后面参数中的X、Y之间用空格隔开。
x,y默认的中心点是元素的中心点（50% 50%）。
还可以给x y设置像素或方位名称

GET_HOSE_UPtrack

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS文档笔记

css全套文档笔记
复制链接

扫一扫

专栏目录

CSS文档笔记

CSS笔记

文章目录

CSS代码风格

CSS基础选择器

标签选择器

类选择器

id选择器

通配符选择器

基础选择器总结

CSS字体属性

CSS文本属性

文本颜色

对齐文本

装饰文本

文本缩进

行间距

css的引入方式

复合选择器

后代选择器

子选择器

并集选择器

区别

伪类选择器

链接伪类选择器

:focus伪类选择器用于选取获得焦点的表单元素。

元素的显示模式

显示模式的转换

单行文字垂直居中

CSS背景

背景颜色

背景图片

背景图片的位置

背景图像固定

背景的复合写法

背景色半透明

CSS三大特性

层叠性

继承性

行高的继承

优先级

盒子模型 把html页面中的布局元素看作一个矩形盒子，封装周围的HTML元素，它包括边框、内外边距、实际内容。

CSS3新增属性

圆角边框

盒子阴影box-shadow

文字阴影text-shadow

浮动float

传统网页三种布局方式

精灵图

字体图标 iconfont

CSS三角

CSS用户界面样式

2D转换–移动transform:

2D转换–旋转rotate

2D转换–旋转中心点设置

:focus伪类选择器`用于选取获得焦点的表单元素。`

盒子模型 `把html页面中的布局元素看作一个矩形盒子，封装周围的HTML元素，它包括边框、内外边距、实际内容。`

盒子阴影`box-shadow`

文字阴影`text-shadow`

浮动`float`