css基础知识

最新推荐文章于 2024-04-19 20:33:06 发布

南初️

最新推荐文章于 2024-04-19 20:33:06 发布

阅读量2.1k

点赞数 9

分类专栏： HTML和CSS

本文链接：https://blog.csdn.net/qq_45806781/article/details/109227787

版权

HTML和CSS 专栏收录该内容

10 篇文章 4 订阅

订阅专栏

一、网页的几种表现形式

视图层（html层）
表现层（css层）
行为层（js）

二、表现层（css ：层叠样式表）

1. css作用：

对html元素的位置和精确计算像素，外观，字体等等，

2. css特点：
 - 丰富的样式定义   
 - 易于使用和修改   
 - 多页面使用   
 - 可层叠（一个元素可具有多个css样式）
 - 页面压缩  （尽量多次复用同样的css，减小css文件体积，提高网页        性能）
3. css样式属性写法**：

属性：值；

三、css几种使用方式：

元素设置宽高的时候块级元素可设，行级元素设置宽高属性是无效的。

1.行内样式

在元素标签上的style属性上直接写css
在浏览器上的位置在
element（元素）.style {
            background: red;
        }
2.内嵌样式

在网页里面任意位置（head/body标签之内去写< style >内部写css< /style>)
<style type="text/css">    type="text/css"  可以省略不写
            </style>
内嵌样式的写法
      ele{
            }
编译之后格式：
* {                      （有当前页面多少行代码）
    border: 1px solid red;
  }
3.外部样式表

css写在外部的css文件里面，网页直接调用使用
样式分为：单属性样式和复合属性样式
复合属性
  background: red  url('./image/0.jpg')  no-repeat  0 0; 
  border:1px solid red;  
  复合上面不能写size，大小只能分开写
单属性
background-color: #f9fdff;   设置背景颜色
background-image:url('./image/0.jpg');   设置背景图片 
background-size:cover;   设置背景图片大小，cover auto   
background-repeat: no-repeat;  设置图片是否平铺 
background-position:50px; background-position-x: 50px; 
background-position-y: 50px;

border-left: 1px solid red; 
border-top:1px solid blue; 
border-bottom:1px solid orange; 
border-right: 1px solid pink; 
border-left-width:10px; 
border-left-style: dashed; 
border-left-color: blue; 

[1]背景属性
加了背景图片时就不需要再设置背景颜色了，因为背景图片会覆盖背景颜色，设置也是无效的。

background-size: cover（整张覆盖）   auto(自动 默认)  contain（包含）  >percentage（设置百分比）  length（设置宽高）
background-size: 50px  设置宽高都为50px
background-size: 50px 100px  设置宽为50px,高为100px
background-repeat: no-repeat  设置背景图片不平铺
background-repeat: repeat-x   设置背景图片横向平铺
background-repeat: repeat-y   设置背景图片纵向平铺
background-position: 0 0   背景图片的坐标
background-position-x: 50  图片到左边的距离为50
background-position-y: 50   图片到上边的距离为50

[2] 字体属性

font-size：设置文字大小，浏览器默认字体是14px,  这个用css默认的值
font-family：设置字体，css默认的有几个字体，也可以自己
自定义字体，但是需要自己导入字体文件：@font-face

四、内嵌样式里面的css选择器

head和body里面都可以进行内嵌
先定位到当前元素，再写css
css 注释 ctrl+shift+/

五、css选择器

1. *匹配器：匹配当前网页里面的所有元素

2. 元素匹配器**：根据当前元素的名称来匹配

3. class类名称匹配器**：根据元素的class属性名称来匹配，用点来匹配元素种的一部分（一个元素可能同时具有多个类）
 <button class="btn btnsub">按钮</button>
 <button>按钮</button>
 <button class="btn">按钮</button>
 <div class="btn">
       我是div
 </div>
4. id名称匹配器**: 根据当前元素的id属性来匹配（一个元素一个，不重名）使用#来选择
           #userID{
               width: 200px;
               height: 30px;
            }
         （id可以重复，建议不这写）

六、组合选择器

1. 子父关系选择器**：

空格选择器
ul li{
   color: red;
 }
备注：空格选择器：指匹配当前元素里面的所有后代元素

2. >选择器**
#menu>li{
   border: 1px solid red;
  }
备注：>选择器：指匹配当前元素里面的直接子元素
写的时候也可以根据元素区分class和id
button.navinfo{
   border: 1px solid blue;
   color: red;
}
ul#menu{
}
3. 相邻元素选择器**

+(匹配当前元素之后紧跟的元素)
~（匹配当前元素之后的所有元素）指的是同级元素匹配
.p1+p{
    color: red;
  }
.p1~p{
   color: red;
  }
  <div class="box">
       <p class="p1">p1</p>
       <span>我是span标签</span>
       <p>p2</p>
       <p>p3</p>
       <p>p4</p>
       <p>p5</p>
   </div>

七、子集选择器(css2里面的伪类选择器)

[1] 里面的数字是按照序号数

.box>p:nth-child(1){
  }

[2] 下面这两个选择器直接找的是子集里面的第一个或者最后一个

.box>p:first-child{
   color: red;
  }
.box>p:last-child{
    color: red;
 }
 <div class="box">
       <p class="p1">p1</p>
       <span>我是span标签</span>
       <p>p2</p>
       <p>p3</p>
       <p>p4</p>
       <p>p5</p>
 </div>

[3] 上面这三个伪类选择器可以直接写元素匹配

p:first-child{
       color: red;
    }
 p:last-child{
     color: red;
   }
p:nth-child(3){
    color: red;
    }
 <div class="box">
       <p class="p1">p1</p>
       <span>我是span标签</span>
       <p>p2</p>
       <p>p3</p>
       <p>p4</p>
       <p>p5</p>
 </div>

八、属性选择器

[1] 根据元素的属性去匹配元素
写法是：匹配器[属性]{}
button[type]{
    color: red;
  }
[2] 多个属性匹配
button[type][class]{
    color: red;
  }
[3] 根据属性值来匹配
 button[class=info][type=button]{
     color: red;
     }
[4] 根据属性值来匹配: 值是以谁开头或者以谁结尾，包含那个字母
button[class^=a]{       (以a开头)
      color: red;
   }
button[class$=m]{      (以m结尾）
      color: red;
    }
button[class*=f]{       (包含f）
   color: red;
   }

九、分组选择器

button,p,span{
   color: red;
 }
.btn,#id,button{
   }
div>#menu,ul>li.info{
   }

十、外部样式

[1] 在外部建立css文件，引入到网页里面
[2] 引入位置在heade或者body里面都可以
[3] 外部样式的写法和内嵌样式的写法一致（都是选择器）
引入方式：
<link rel="stylesheet" href="./css/index.css" type="text/css"/>
rel=“stylesheet” ---------css的解析方式
href="./css/index.css"-------------解析路径
type=“text/css” ------- 可以省略不写

十一、css三大样式之间的优先级

1.优先级：

[1] 三大样式之间如果存在冲突：行内样式>内嵌样式>外部样式（行内样式>外部样式>内嵌样式）-----------跟加载css的顺序就有关
[2] 三大样式之间如果样式不冲突，则叠加

2. 选择器之间的优先级（内嵌、外部样式存在）

[1] 四个基本选择器之间的优先级： id>class>ele>*
[1] 组合选择器里面的优先级：
如果是用元素匹配器在写，那么子父关系里面元素匹配器的优先级大于自身的优先级；
元素匹配器里，如果只是元素在写，那么优先级就是它自身的类大；
如果是带父级，子父关系组合里面的类的优先级一定比自身的优先级大
id比这些的优先级都大，但是子父关系里面的id会大于id的优先级
同元素、同名称，如果牵扯到组合的，组合的优先级一定大于它自身的优先级
同匹配方案牵扯到父级（父级的优先级高）
提高样式优先级：！important 提高的比行内样式优先级还高

十二、css里面的盒子模型

[1] 作用：用来设计和布局的时候使用
[2] 包括：边距边框填充实际内容
[3] 一个简单的元素就可以构成盒子模型
[4] 浏览器给网页body元素默认一个margin外间距值 8px
一般加入：
*{
     margin: 0;
     padding: 0;
 }
[5] 外间距属性写法：
margin-left: 50px; 
margin-top: 50px; 
margin-right: 50px;
margin-bottom: 50px; 
margin: 0 10px 20px 30px;（上、右、下、左） 
margin: 0px10px 20px;（上、左右、下） 
margin: 0px 10px;（上下、左右） 
margin:0;（上下左右） 
[6] 内间距属性写法：
padding-left: 20px;  
padding-top: 20px;  
padding-right: 20px; 
padding-bottom: 20px;  
padding: 0 10px 20px 30px;（上、右、下、左）  
padding:0px 10px 20px;（上、左右、下）   
padding: 0px 10px;（上下、左右）  
padding:0;（上下左右）
[7] 盒子格式
 box-sizing: content-box;
 正常的盒子模型是往外走，内容区域不变，把盒子撑大 box-sizing:
 box-sizing: border-box  
 盒子往里面陷，内容区域变小，盒子大小不变 
[8] css样式属性值里面inherit
当前元素的这个属性值继承父元素的这个属性值
       .box>span{
           display: inherit;
         }
[9] css里面块级元素和行级元素相互转化
使用display:block;（转化块级）
display:inline-block;(转化行级块：转化为块级元素，但是他不换行）
display:inline;（转化行级）

两个盒子上下放置，设置外间距：两个容器间的间距不会叠加，而是取两个里面间距的最大值
如果是两个行级块，那么他们之间的外间距会叠加
[10] BFC：是指元素相对独立，自身的结构和位置不会影响周边元素
参考文档
https://blog.csdn.net/sinat_36422236/article/details/88763187，
https://zhuanlan.zhihu.com/p/25321647

[11] 只要元素满足下面任一条件即可触发 BFC 特性：
body 根元素
浮动元素：float 除 none 以外的值
绝对定位元素：position (absolute、fixed)
display 为 inline-block、table-cells、flex
overflow 除了 visible 以外的值 (hidden、auto、scroll)

[11] 普通流的BFC：
块元素上下结构如果属域同一个BFC，这两个元素之间的外间距会重叠
如果将另一个元素用其他元素包裹设置父元素样式 overflow: hidden;
会构建为另一个BFC，这样的两个上下元素之间的间距会叠加不会重叠

十三、css里面的伪类

[1] :hover 悬停伪类
[2] :active 激活伪类
[3] :checked 选择伪类主要使用 radio checkbox
[4] :focus 获得焦点伪类 input表单元素
[5] 一般使用下面这两个伪类来做css特效
[6] :after 给元素的内容之后追加内容
[7] :before 给元素的内容之前追加内容
   a:hover{
      color: blue;
   }
   a:active{
      color: orange;
    }
   .ckbox:checked+span{
        color: red;
    }
    .idcard:focus{
        color: red;
    }
[8] 下面这两个是可用和不可用的伪类，表单元素添加disabled 为不可用，不添加可用
    input:disabled{
         color: blue;
    }
    input:enabled{
       color: green;
     }
    .fontbox:after{
        content: "";
      }
    .fontbox:before{
        content: "";
     }

十四、css里面的尺寸

[1] width height max-width min-width max-height min-height line-height
[2] line-height: 100px：属性设置一行的高度如果是单行文本，当line-height的值与height的值相同时，可以做单行文本相对父容器垂直居中。

十五、css里面的文本对齐方式

text-align:left center right inherit

十六、css里面的像素单位

[1] px(固定单位像素) rem em %（百分比相对父容器走百分比）
[2] rem 相对根节点如果给html设置字体大小16px 1rem =16px;
[3] em 相对像素如果父元素没有设置字体大小，相对浏览器走默认像
（如果父容器设置字体大小，相对父容的字体大小）

十七、input表单元素的轮廓

input {
   outline: none; -------------------去掉轮廓
   outline-color: red;---------------设置轮廓颜色
   outline-width: 2px;--------------设置轮廓宽度
   outline-style: dashed;----------设置轮廓样式
   outline-offset: 10px;------------设置轮廓偏移
 }

十八、盒子超出隐藏属性

南初️

关注

9
点赞
踩
38

收藏

觉得还不错? 一键收藏
打赏
1
评论
css基础知识

一、网页的几种表现形式视图层（html层）表现层（css层）行为层（js）二、表现层（css ：层叠样式表）css作用：对html元素的位置和精确计算像素，外观，字体等等，css特点：<1>丰富的样式定义<2>易于使用和修改<3>多页面使用<4>可层叠（一个元素可具有多个css样式）<5>页面压缩（尽量多次复用同样的css，减小css文件体积，提高网页性能）3. css样式属性写法：属.
复制链接

扫一扫