【CSS知识点总结】

最新推荐文章于 2024-10-04 22:03:04 发布

monday_komorebi

最新推荐文章于 2024-10-04 22:03:04 发布

阅读量48

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/monday_komorebi/article/details/131369951

版权

本文总结了CSS的一些核心概念，包括选择器的使用（如标签选择器、类选择器、ID选择器、伪类选择器），元素的显示模式（块元素、行内元素、行内块元素），背景属性（颜色、图片、位置、固定），以及CSS的三大特性（层叠性、继承性、优先级）。此外，还提到了盒子模型、浮动定位、弹性盒子布局以及一些实用的属性，如cursor、border-radius、box-shadow等。

摘要由CSDN通过智能技术生成

css知识点总结

基本属性(已经非熟悉的)

一、选择器{样式}

    1、标签选择器 大量改变
    2、.class{}样式点定义，结构类调用 一个或多个 开发最常用
    不能用标签选择器
    3、id选择器  这种选择器只能调用一次，不能重复使用
    4、通配符选择器
    *{} 所有的都改为*内容那样的
     总结：给谁改样式{
     				改什么
    					 }
	例：   h1 {
			color: blue;
			 font-size: 12px;
		  }
		  .red {
        color: aquamarine;
   		 }

	5、 复合选择器 
    1、后代选择器
    2、子选择器  必须是亲儿子 不是孙子
    3、并集选择器  可以选择多组标签 同时为他们设置相同的样式
    4、伪类选择器 链接伪类 
     a:link  未访问过的链接
     a:visited  已经访问过的链接
     a:hover 捕捉鼠标经过
     a:active 捕捉鼠标按下去还没有弹起来
    经常使用的是 a{} a:hover
     :focus 伪类选择器
    用于选取获得焦点的表单元素

二、 css元素的显示模式

即元素或者标签以什么方式进行显示

    html元素一般分为块元素 和行内元素
    常见的块元素有(非常霸道，自己独占一行)：h1  div  p ul ol li 
    是一个容器或者盒子，里面可以放行内或者块级元素
    常见的行内元素有：span strong b em  等
    宽高设置无效，行内元素只能容纳文本或其他行内元素，不能放块元素
    *链接里面不能再放链接 链接里面可以放块元素
    *注意：在行内元素中有几个特殊的标签 img imput td 称为行内块元素
    一行可以显示多个(行内元素的特点)
    行高，高度可以控制（块元素的特点）

三、css显示模式的转换

    display: block; 转化为块元素
    display: inline; 转化为行内元素
    display:line-block;  转化为行内块

四、css的背景

   背景颜色： background-color:transparent(默认是透明)|color
   背景图片：用于一些装饰性的小图片或者logo 或者是超大的图片优点便于控制位置（精灵图也是一种应用场景）
   background-img:none|url()
   背景平铺：
   background-repeat:no-repeat //默认是平铺的
   background-repeat:repeat-x|repeat-y //可设置在x轴或者y轴上平铺
   背景图片可以压住背景颜色
   background-position:x y(x,y可以是方位名词或者精确单位)
   background-position:center (x中心，y默认居中)
   background-position:top(y为top,x默认居中)

五、背景精确位置

   background-position:20px (x)50px(y);
   如果只有一个数值，则一定是x的
   background-position:center 20px;
   background-position:20px center

六、背景图像固定

   background-attachment:scroll|fixed
   设置背景不随着界面滚动而滚动
   background:black url("") fixed
   css背景的复合写法
   background:transparent url() repeat-y fixed top
   与文本不同，背景的复合写法没有要求书写顺序

七、背景颜色半透明

                  (红，绿，蓝，透明度)
    background:rgba(0,0,0,0.3)
    background:rgba(0,0,0,.3)
    注意：只是让背景颜色变透明，里面的内容不会变透明

八、css的三大特性

    1. 层叠性 就近原则
    相同的选择器设置相同的样式 就近采取某个样式 远的会被层叠了，代码被划掉了
   注意： 只有样式冲突的命令会被覆盖掉 不冲突的不会
    2. 继承性 父标签中的样式 可以被子标签继承，但仅仅可以继承部分元素，例如跟文字相关的样式
    行高的继承：行高可以跟单位也可以不跟单位
    font:12px/1.5 子元素会继承父类元素，子元素的行高为当前文字大小的1.5倍
   3、css优先级
   选择器相同，则执行叠层
   选择器不同 则分优先级
   继承/通配符选择器<标签选择器<类选择器<id选择器<style(行内样式表)<!important
   4、css权重的叠加
   复合选择器会有权重叠加的问题 ul li: 不会有进位的问题

九、css盒子模型页面布局三要素：盒子模型浮动定位

   盒子模型：标签-样式-装内容 网页布局的核心：利用css摆盒子
   border 边框 content内容 padding内边距 外边距margain
   边框的复合写法：
   border:1px solid red;//没有顺序
   边框会影响盒子的实际大小

十、emmet语法:快速生成标签和css样式

p.one
div.ccc
p*4
p+div
div+tab
div{jjjj} + tab
div{jjjj}*4 + tab
div{$(自增符号从1开始)}+tab
ul>li
div>p

· 简写方式：
ti text-align
w100 weight=‘100’
h height
lh line-height

重要属性(需要记忆的)

1、cursor: 网页浏览时用户鼠标指针的样式或图形形状。

属性值：
default：默认光标（通常是一个箭头）

auto：默认，浏览器设置的光标

crosshair：光标为十字线

pointer：光标为一只手

move：光标为某对象可移动

text：光标指示文本

wait：光标指示程序正在忙（通常是一只表或者一个沙漏）

2、border-radius：一般都是用在给div或者button加角弧度（也可能用于图片），显得好看一点，或者用来画一个圆div。用的稍微高级一点的，也就是用来画了一个右半圆来做为侧边栏的展开/收缩按钮。

指定每个圆角
四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
border-radius: 15px 50px 30px 5px
三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
border-radius: 15px 50px 30px
两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
border-radius: 15px 50px
一个值：四个圆角值相同

最常用的语法：一个值 border-radius: 30px; 给边框加圆角边框

3、box-shadow: 0 3px 3px 0 rgba(0,0,0,0.3), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);设置阴影

4、overflow:处理溢出盒子的部分对于滚动，可指定x或y方向的溢出处理，如

overflow-y:scroll
overflow-x:scroll

·visible 默认值，溢出部分不被裁剪，在区域外面显示
·hidden 裁剪溢出部分且不可见
·scroll 裁剪溢出部分，但提供上下和左右滚动条供显示
·auto 裁剪溢出部分，视情况提供滚动条

5、float 浮动元素

在一个区域或容器内，我们可以设置float属性让某元素水平方向上向左或右进行移动，其周围的元素也会重新排列。
我们常用这种样式来使图像和文本进行合理布局

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。如果希望浮动元素后面的元素在其下方显示，可使用clear: both样式来进行清除。

6、opacity：设置元素(一般是图片)透明度

值在[0.0～1.0]之间，值越低，透明度越高

7、伪类和伪类元素

选择器后使用 : 号，再跟上某个伪类/伪元素

常见的伪类或者伪类元素的使用：

a:link {color:#FF0000;}     /* 未访问的链接 */
a:visited {color:#00FF00;}  /* 已访问的链接 */
a:hover {color:#FF00FF;}    /* 鼠标划过链接 */
/* 鼠标移到段落则改变背景颜色 */
p:hover {background-color: rgb(226, 43, 144);}
p:first-line{color:blue;}   /* 段落的第一行显示蓝色 */
p:first-letter{font-size: xx-large;}   /* 段落的第一个字超大 */

h1:before { content:url(smiley.gif); } /* 在每个一级标题前插入该图片 */
h1:after { content:url(smiley.gif); } /* 在每个一级标题后插入该图片 */