css基础

css网页布局

最大价值：让html做结构，与样式相分离

选择器 {属性：值;属性：值;}

p {
    color: red;
}

css的代码风格

  • 样式格式书写:紧凑格式 , 展开格式（提倡，更直观）
  • 样式的大小写:用小写的形式做
  • 空格规范:属性值前面，冒号后面，空一格;选择器和大括号中间保留一个空格;css选择器的作用：简单来说，就是选择标签用的

css的三种书写

  • 内部样式表：html的内部，style标签内，理论上可以放在任何地方，但常用于上方(嵌入式的)，可以控制整个页面

    优点:结构清晰

  • 行内样式表：直接砸标签内部写style标签

    <p style="color:red"></p>

    用于修改简单的样式

  • 外部样式表：样式和结构分离，css在html的外部

    1. 新建一个css的文件，css文件只有样式，没有标签

    2. <link rel="sytlesheet" href="路径"/>

link和@import（css2）的区别

<style>
    @import url('...');
</style>
  • 写的形式不一样
  • link是xhtml标签，@import属于css的范围，只能加载css
  • link应用css时，在页面加载的时候同时加载，@import需要页面网页完全载入以后加载
  • link支持使用javascript控制DOM去改变样式，而@import不支持

CSS背景

  • 背景图片：优点，容易控制位置

    // 背景图片
backgroud-img:none/url;
// 背景平铺：重复图片
background-repeat: none/no-repeat;
//背景图片位置 注意：方位名词只写一个时，另外一个默认居中显示；无顺序的要求
background-positon: x y;
// 背景图像固定 负值的时候是往左和往上移动
background-attachment: sroll/fixed;
// 背景颜色
background-color: red;
// 背景缩放 可以数字固定也可以时百分比，百分比时候是根据盒子的百分比为基准
background-size: x y;	
background-size: contain;	// 等比例的拉伸图片,不超过盒子
background-size: cover;		// 等比例的拉伸图片,会超过盒子

    背景复合写法：background习惯性的写 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置

    多倍景：先写的覆盖后写的 图片one会堆叠再two上

    background: url('one') no-repeat left bottom,url('two') norepeat center center

  • 背景色半透明

    background: rgba(0,0,0,0.3);

  • 背景渐变

    background: linear-gradient(起始方向,颜色1，颜色2...);
#起始位置：left right tip bottom ; to left bottom 左下角
background: -webkit-linear-gradient(left,red,blue);
background: -webkit-linear-gradient(left/top,red,blue);
// 颜色节点均匀分布
background: radio-gradient(red,green,blue);
// 颜色不均匀的径向渐变
background: radio-gradient(red %4,gree 10%,blue 4%);
// 现状为圆形的径向渐变
background: radio-gradient(circle,red,green,blue);

    注意：

    1. 背景渐变必须添加浏览器的私有前缀
    2. 背景图片要设置成功，必须要有高和宽

Emmont语法

快速标签生成

  • tab键，直接输入标签名

  • 生成多个标签，eg:div3(加tab键)

  • 父子级关系>(tab)；兄弟级关系+(tab)

  • 生成带有类名或是id名的，直接写.demo(tab) 或者#demo(tab)

    div.demo(tab)或者div#demo(tab)

  • 若生成的类名有顺序,用$自增符号，从1开始排序

    demo$*5(tab)

  • 默认显示几个文字，用{}

    div{我不喜欢}(tab) 
div{$@1996}*2 //从1998到1999

选择器

  • 基础选择器

    1. 标签选择器
    2. 类选择器：最常用的
    3. ID选择器：有唯一性，同一个id属性只能有一个
    4. 通配符选择器：*{}

  • 伪类选择器

    a:link没访问过的链接

    a:visited访问过的链接

    a:hover鼠标经过时的链接

    a:active点击没有松开时

    按顺序申明：link visited hover active

    目标伪类选择器

    :target {	// 匹配页面中所有目标元素 h1
    color: red;
}	

<a href='#anchor1'>one</a>
<a href='#anchor2'>two</a>
<a href='#anchor1'>one</a>
<h1 id='anchor1'>瞄点一</h1> 
<h1 id='anchor2'>瞄点二</h1>

    E:only-child {	
    // 匹配所有没有任何兄弟元素 并且这个元素是E
    color: red;
}

    E:only-of-type {}	//匹配没有和E同种类型的元素
// 匹配所有E元素，且这个E元素没有任何同一类型的兄弟元素

    E:empty {}	// 匹配所有p标签，且没有任何内容和子节点

  • 复合选择器

    交集选择器

    两个标签挨在一起，中间不能有空格

    div.test 表示既是div而且div的类名是test

    并集选择器：逗号隔开

常见文本属性

font-style

  • itaic：倾斜字体，有一些倾斜字体的文字是没有斜体的，使用浏览器强制执行
  • normal：默认正常值
  • oblique： 浏览器会显示倾斜的字体样式。

font-weight

字体粗细

  • 数字：100-900取值范围
  • 单词：normal正常 bold bolder加粗 lighter变细

font-family

字体样式

  • '宋体' / '隶属'
  • '\5E7C\5706'
  • LiSu 如果是英文单个 不需要引号
  • Georgia 'Times New Roman' 'Times' serif '隶书' 既有英文又有中文，中文写在后面

font-size

  • samller x-samller xx-samller large larger x-large xx-large
  • 数字加单位形式 13px

单位

100vw：整屏宽度

100vh：整屏高度

vmax：选vh vm中较大的一个

vmin：选vh vm中较小的一个

  • 相对定位

    em:相对于当前对象内文字字体尺寸

    px:相相对于电脑屏幕的分辨率，谷歌默认文字大小是16px

  • 绝对定位

    in:英寸

    cm:厘米
    mm:毫米

    pt:点

font

// 空心文字 
<style>
       span {
           font-size: 40px;
           font-weight: 700;
           -webkit-text-fill-color: #f4f4f4;
           -webkit-text-stroke-color: red;
           -webkit-text-stroke-width: 1px;
       }
   </style>
   <span>空心文字</span>

font属性对字体进行综合的设置

font: font-style font-weight font-size/line-height font-family

注意：使用font属性时，必须按照以上顺序书写，不能更换顺序

其中不需要的属性可以省略，但必须保留font-size和font-family

color

字体颜色

  • red

  • cccccc

    00ffaa 两两相同可以省略 #0fa

  • rgb(a,b,c)

    raba 最后a表示透明度：0表示完全透明，1表示完全不透明

  • hsl( )

    H 颜色名字：取0到360 0/360红色 120绿色 240蓝色

    S 纯度：值越高越纯 越低越灰 （0-100%）

    L 亮色：黑到白 越低越白 越高越黑 （0-100%）

text-align

文本对在标签之中的对齐方式，，默认左对齐

  • center
  • left
  • right
  • justify:文本的两端对齐，一般用于英文锯齿状

text-decoration

文本划线

  • none：没有样式
  • underline：下划线
  • overline：上划线
  • line-throught：删除线
<div>
    my what is a Big Dack
</div>
<style>
    div {
        text-decoration: none;
        text-decoration: underline;
        text-decoration: overline;
        text-decoration: line-through;
    }
</style>

text-transform

转换文本的大小写

  • capitalize：每一个单词的首字母大小
  • lovwercase：所有字母都小写
  • uppercase：所有字母都大写
  • none：默认都不改变
<div>
    my what is a Big Dack
</div>
<style>
    div {
        text-transform: lowercase;
        text-transform: uppercase;
        text-transform: capitalize;
    }
</style>

text-indent

首行的文本缩进，em一个文字大小

text-indent: 2em;
// -200px

注意：允许负的

text-shadow

文字阴影

text-shadow: 水平方向的阴影位置 垂直的阴影位置 模糊距离 阴影颜色

text-shadow: -10px -10px 3px red,10px 10px 3px pink

注意：可以写多组文字阴影，用逗号隔开

letter-spacing

增加或减少字符间的距离，正值增加，负值减少，用于汉字

若用于字母，则每个字母间的距离都会变大

letter-spacing: 20px;

word-spacing

用于英文的

word-spacing: 20px

line-height

行高，该上下间距，文字行和文字行之间的距离

  • number：固定的数字，此数字会与当前字体尺寸相乘来设置行间距

  • length：设置固定的行间距

  • %：基于当前字体尺寸的百分比行间距

    注意：一般情况下，行距比字号大7 8 像素即可

word-break

  • normal:使用浏览器默认的换行规则

  • keep-all:文本内容在同一行显示，不换行

    注意：在半角空格和-的时候可以换行，第一次遇见空格会直接换行，接着要看是否超过显示框，如果没有超过就不换行

    一般不用于英文

  • break-all：针对英文，所有单词遇到边界一律拆分

white-space

  • pre：保留文本原本的样式，超过父元素不换行
  • nowrap：文本不换行，文字再一排(一行)显示
  • pre-wrap：能解析空格，超出部分自动换行
  • pre-line：不解析空格，超过部分自动换行

层叠性 优先级 继承性

层叠性是浏览器处理冲突的能力，如果一个css属性通过两个选择器设置到同一个元素上，那么这个时候的属性就会被另外一个属性层叠掉

优先级

!important>行内样式>id选择器>类/伪类选择器>标签选择器>继承或者*

权重叠加：计算权重,权重会叠加，但不会有进位

  • 行内样式 1 0 0 0
  • id选择器 0 1 0 0
  • 类选择器 0 0 1 0
  • 元素选择器和伪元素选择器 0 0 0 1
  • 通配符，子选择器，兄弟选择器 * > + ~等 0 0 0 0
  • 继承的样式没有权重 !important的权重最高

继承性

文本字体的属性：font-size font-family color text-align

注意

  • a标签里面的文字颜色是不能继承父亲的设置的

    <style>
        div {
            color: pink;
        }
    </style>
    <div>
        <a href="#">dsagoji</a>
    </div>

继承的是离它最近的祖先元素

	<style>
        #test {
            color: red;
        }
        .father2 {
            color: black;
        }
    </style>

    <div id='test'>
        <div class="father">
            father	// 继承id　的红色
            <div class="son">son</div>	// 继承id的 black
        </div>
        <div class="fater2">
            father2		// 类＞id　black
            <div class="son2">
                son2
            </div>
        </div>
    </div>

盒子模型

盒子模型：marge padding content border

ie盒模型 : 最大的不同在于padding不会撑大盒子

margin

border

border:border-width border-style(solid dashed dotted) border-color

border复合写法：

border:1px solid red	// 边框宽度 边框样式 边框颜色
border-style: solid dotted dashed double; 	// 实线 电线 虚线 双线
border-color: red;
border-width: 2px 3px 1px 	// 上2 右3 下1 左和右一样3

border分别设置

border-right-style: dotted;
border-top-color: red;
border-left-width: 3px;

(没有严格的顺序要求，一般按照这样格式)

  border-collapse: collapse;(表格的细线边框)

注意：边框会影响盒子的实际大小

border-radius边框圆角

border-radius: 4px 8px 12px 16px 	// 左上 右上 右下 坐下
border-radius: 4px 8px; 	// 如果没有某个值就从对角取值
border-top-left-radius: 5px; // 坐上角

​ 复合写法eg:

​ padding: 5px 代表上下左右都是5px

​ padding: 5px 10px 上下5，左右10

​ padding: 5px 10px 15px 上5px 左右10px 下20px

​ padding: 5px 10px 15px 20px 从上开始顺时针

​ marge与padding类似

padding不会撑破盒子

  • 如果没盒子本身没有指定高度或者宽度时，不会撑大盒子

浮动的盒子不会有外边距合并的问题

阴影盒子和文字阴影

box-shadow:h-shadow v-shadow blur spread color inser;	// 水平方向(必填) 垂直方向(必填) 模糊距离 阴影大小 内部阴影

h-shadow,v-shadow:设置阴影的位置

spread:向外延展的尺寸距离，设置阴影的大小

注意

  1. inser不写时候默认是outside，但不可以写，不然阴影无效
  2. 盒子阴影不占空间，不会影响其他盒子的排列

文字阴影：text-shadow:h-shadow v-shadow blur color;

浮动

float: left;
float: right;

CSS浮动特性

标准流：从上往下 从左往右

​ 块级元素一般在父元素从上到下排列

​ 行内元素一般在父元素从左到右排列

  • 会脱离标准流的控制（俗称脱标），不在保留原来的位置

  • 不管原先是什么元素，加了浮动后具有行内块元素的特点

    如果是块级元素，想要有高度，必须手动添加，它默认的100%添加浮动后会消失

  • 所有浮动的盒子在一行显示，并且顶端对其（不管低端），若是装不下，会另起一行显示

    浮动的元素不会撑开父元素

	<style>
 .father1 {
            width: 220px;
            height: 200px;
            box-sizing: border-box;
            border: 2px solid red;
        }
        .father1 div[class^='son'] {
            float: left;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
    <div class="angle"></div>
    <div class="father1">Lorem ipsum dolor sit t magni nesciunt eaque amet saepe exercitationem? Voluptatum aute
        m aut sint distinctio itaque corrupti tenetur ad blanditiis?
        <img src="images/睁眼.png" alt="">
        <div class="son1"></div>
        <div class="son2"></div>
        <div class="son3"></div>
    </div>

  • 浮动的元素不会遮住文字和图片

    清除浮动

  • 同层级

    clear: left;
// ----------------
clear: right;
// ----------------
clear: both;

  • 父子级

    1. 给父元素加heitht(不推荐)

    2. BFC布局

      overflow: hidden;
// -----------------------
display: inline-block

    3. 给父元素的浮动后边加一个空的块级标签，设置清除浮动

      clear: both;
// ---------------------
E::after {
    content: '';
    display: block;
    clear: both;
}
// -----------------------------
//IE6,7专用
*zoom: 1;

CSS消除样式

清除内外边距css样式
		 * {
			 marge:0; 
			 padding:0;
		 }
		 注意：行内元素为了兼容性尽量只设置左右的内外边距，设置之后可能也并不会起作用

ul li {
	list-style: none;
}

定位

定位：将盒子定在某一个位置，定位也是在摆放盒子，按照定位的方式移动盒子

定位：定位模式+边偏移

定位模式是用来指定一个元素在文档中的定位方式，边偏移则决定了该元素的最终位置

定位模式

  • static:静态定位

  • relative:相对定位

    相对定位是元素在移动位置的时候，相对于它原来的位置来说的（自恋型）

    positon: relative

    注意

    1. 它是相对与自己原来的位置移动的（移动位置的时候参照点是原来的位置）

    2. 原来在标志流中的位置继续占有，后面的盒子仍然以标准流的方式对待它（不脱标，继续保留原来的位置）

      相当于块级元素还是可以继承父元素的宽度的

  • absolute:绝对定位

    绝对定位是元素在移动位置的时候，相对于它祖先元素来说的

    position absolute;

    1. 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位

    2. 如果祖级元素有定位，则以最近一级的有定位的祖先元素为参照点移动位置

    3. 决定对位不占有原来的位置（脱标）

      不能继承父元素的宽度，需要手动区设置

  • fixed:固定定位

    不写偏移量的时候 相对于body定位的（默认状态）

    写偏移量的时候才是相对与浏览器定位

    使用场景：可以在浏览器页面滚动时元素位置不会改变

// 定位设置居中
	<style>
        .father2 {
            width: 500px;
            height: 300px;
            margin: 0 auto;
            position: relative;
            background-color: purple;
        }
        .father2 .son {
            position: absolute;
            width: 20px;	 /* 如果高度或则宽度没有写，则会拉伸到父元素的高或宽 auto表示平分剩余空间*/
            height: 20px;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            background-color: pink;
        }
    </style>
    <div class="father2">
        <div class="son"></div>
    </div>

隐藏

(面试题)

盒子隐藏

  • display: none;

    隐藏 不会持续占据空间 会隐藏子元素 子元素不能通过设置diaplay: block进行反隐藏

  • visibility: hidden/visibale;

    隐藏 会持续占据空间 会隐藏子元素 子元素能通过设置visibility: visible进行反隐藏

  • opacity: 0/1;

    0完全透明 1完全不透明，子元素不能透过子元素 opacity: 0.8进行反隐藏

  • position: absolute;

    设置偏移量移出视线范围

  • 设置宽高 背景透明 不会隐藏子元素 transparent rgba

文本隐藏

  • text-indent: 负值;

    文字放入盒子 盒子设置隐藏

  • font-size: 0

overflow

overflow: hidden/scroll;
overflow-x: hidden; <-- y轴上会有滚动条 -->
overflow-y: hidden;
  • auto：内容被修建，浏览器会显示滚动条
  • inherit：规定应该从父元素继承overflow属性的值

text-overflow

  • clip：修剪文本
  • ellipsis：显示省略符号来代替被修剪的文本

文字省略...

width: 100px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;

注意：要加高度

多行文本显示省略号，有较大的兼容性问题，适用于webkit浏览器或移动端

-webkit-line-clam:限制一个块元素显示的文本行数

diaplay: -webkit-box 必须结合属性，将对象作为弹性盒子

-webkit-box-orient 必须结合属性，设置或检索伸缩盒对象的子元素排列方式

width: 300px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
posted @   a立方  阅读(57)  评论(0)  编辑  收藏  举报
相关博文：
· 移动端开发
· html基础
· CSS笔记
· 前端——CSS
· CSS基础
阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· .NET10 - 预览版1新功能体验（一）
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛