css

最新推荐文章于 2024-07-11 17:28:05 发布
最新推荐文章于 2024-07-11 17:28:05 发布
阅读量223 收藏 1
点赞数
分类专栏： h5 文章标签： css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48247235/article/details/110404416
版权

CSS语言

css简介
css通常称为css样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体,大小,对齐方式等）,图片的外形（宽,高,边框样式,边距等）以及页面的布局等外观显示样式。（css:cascading层叠 style 样式 sheet表）
css语法
1.选择器通常是需要改变样式的HTML标签
2.声明以大括号{}括起来，每条声明由一个属性或一个值组成，属性与属性值之间用【冒号】分隔
3.定义多个声明，用【分号】将每个声明分开
写法
元素—》 样式对象 style—>css样式集合
三种引入css的方法
一.内联样式（也叫行内样式）
缺点：

  1. 只对当前元素起作用
  2. 代码冗余，体积大，后期维护困难
    优点：优先级高
    适用场所：
    ​ 用在后期js动态改写一些元素身上要计算的值
<div style = "width:100px；height：100px"</div>

二.内部样式表（内嵌式）
优点：一定程度上实现了结构与样式的相分离 代码减少冗余 后期维护相对容易
缺点：没有彻底实现了结构与样式的相分离
使用场合：覆盖外部链接的样式

 <!-- 必须写在head里 style样式表  针对的是此结构文件-->
    <style>
       /* 
            选择器名 {
             // css属性
             属性名：属性值;
             属性名：属性值;
             属性名：属性值;

           }
       */
     
 
    </style>
</head>

三.外部样式表（外链式）
优点：彻底将样式和结构分类
缺点：优先级最低

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入外部样式 link
    
    rel: 链接进来的文件类型  和当前文件的关系
    -->
    <link rel="stylesheet" href="./test.css">
    <style>
        .top-box {
            background-color: yellow;
        }
    </style>

</head>

注意

  1. List item

行内>内部嵌入>外部链接

css基础选择器
作用：挑选元素加css样式
写法

 选择器名 {
             // css属性
             属性名：属性值;
             属性名：属性值;
             属性名：属性值;

           }
1.标签选择器  --》通过标签名字挑选元素 --->若干个
div {
    
}
2.类选择器  ----》通过给元素加class类属性 挑选元素 使用的时候加.
.类名 {
    
}
 
.a {
    width:200px;
    height:200px;
    
}
<div class="a">1</div>

3.id选择器 ---》通过给元素加id属性 挑选元素 是一个唯一识别  使用的时候加# 
#id属性值{
    
}
#a {
    width:200px;
    height:200px;
    
}
<div id="a">1</div>


4.*全局选择器  ---》可以挑选包含html在内的所有元素
* {
    background-color:red;
}

文本类型属性
font字体属性

font:font-style  font-weight font-size/line-height  font-family;
font:normal 400 14px/1.5  Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;

字体形式
font-style:正常normal（默认）/斜体italic 或者 oblique
em,i {
    font-style:normal;//变得不斜体 把它当小盒子去用
}

字体的粗细
font-weight:100-900; >400 粗  <400细 =400正常的字体


字体大小
font-size: 默认的字体16px 最小字体大小12px 

字体类型、家族
font-family:"Microsoft YaHei","宋体","楷体";  备选项  中文 + 英文



京东：
font-family:Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;

1.多个备选字体,,, 先写中文在写英文字体
2. 如果字体名字是单个英文单词 不要包裹引号""  如果字体单词有空格  要包裹引号"" ;
3. 尽量不要用中文声明字体


网络字体声明:
字体自己研发:w字体 （文件）
@fontface {
    font-family:'w';
    src:url(./a/b/w.eot);
}

line-height 行高

上一行文字到下一行文字的顶线之间的距离
line-height:40px固定/150%/1.5
150% 行高等于字体大小的1.5倍

文本水平对齐属性

text-align:left/right/center居中

文字其他属性
文字修饰属性

text-decoration:underline下划线/overline上划线/line-through中划线/none没有线

字符间距

letter-spacing:10px;

单词间距（只有英文有）

word-spacing:10px;

文本格式化输出属性

white-spacing:pre-wrap保留换行/nowrap强制一行显示/normal换行/pre保留换行;

字体颜色color

color:red(练习时使用)/十六进制#6位16进制    #000000黑色---#ffffff白色  
#ff0000--rgb(255,0,0)->红色


十六进制:16个 0-15      0-9    10-a  11-b  12-c  13-d 14-e 15-f  [0-9 ,a-f] 
二进制:0 - 1  
十进制: 0-9 13



三原色表色 红色  绿色 蓝色 
color:rgb(red0-255,green0-255,blue0-255);
      rgba(red,green,blue,alpha)   alpha透明度0-1 0是完全透明 1完全不透明

设置字母大小写

text-transform:capitalize首字母大写/lowercase小写字母/uppercase大写

缩进属性

text-indent:10px/2em/2rem;

9999px --->向右
-9999px--->向左

单位与尺寸

px/%/em/rem

px:绝对单位 
%:相对单位 父级元素
em:相对单位  父级元素字体大小( 如果子元素没有自己的字体大小值 20*20 会取父盒子的字体基础值作为自己的字体值)
rem:相对单位 html根元素字体大小

div.a>div.b 父子关系
div.a {
    font-size:20px;
}

div.b {
    // 2em = 2*20=40px
    font-size:2em;
    text-indent:2em;
    width:30em;
    height:20em;
}
html {
    font-size:10px;
}

div.b {
     // 
    font-size:2rem;
    text-indent:2rem;
    width:30rem;
    height:20rem;
}

布局核心：盒模型

盒模型：描述网页上盒子的组成部分

盒模型宽度=有效宽度width + 内边距padding-left /padding-right+ 边框border-left/border-right + 外边距margin-left / mergin-right

盒模型高度=有效高度height + 内边距padding-top/padding-bottom+ 边框border-top/border-bottom + 外边距margin-top / mergin-bottom

外边距属性margin
功能： 移动盒子位置(上和左外边距)

1.可以设置负值

2.右下外边距只是扩大盒模型

margin-left/margin-top/margin-right/margin-bottom


div {
    margin:10px; //这个盒子外边距均为10px
    margin:20px 40px;//这个盒子的上下外边距为20px 左右为40px
    margin:10px 30px 50px;// 这个盒子的上外边距10px 左右是30px  下50px
    margin:10px 20px 30px 40px//这个盒子的上右下左 顺时针
}

盒子的水平居中

margin:0 auto;水平居中   auto 自动 

1.这个盒子必须要有明确的宽度

边框属性 border
功能：盒子内外的分界线
属于外扩在width外侧的 也要在width上内减 加多少减多少

border:1px                solid      #ccc;
border:border-width  border-style  border-color

border-width:
border-style:solid实线/dashed虚线/dotted小圆圈线  (必须写)
border-color:#ffff000/rgba()/rgb()  默认取你当前盒子color作为边框颜色

border-top-style:
border-top-color:
border-top-width:

border-width:1px 0px 0px 1px;顺时针 上1 右0 下0 左1 
border-style:solid;
border-color:red yellow blue #fff;


border:none/0; 没有边框  取消边框

边框的应用
案例（做小三角，箭头）

 .trangle {
            width: 0px;
            height: 0px;
            //尖角朝下的红色三角形
            border-top:100px solid red;
            border-left:100px solid rgba(0,0,0,0);
            border-right:100px solid  rgba(0,0,0,0);
          
        }//代码替代img 目的：减少http请求

内边距padding
功能：边界和盒子内容的距离，调整盒子内容的位置
不可以为负值 上下左右的内边距均可以移动内容的位置

外扩盒子 需要内减计算 加多少就减多少

padding:10px;
padding:10px 20px;
padding:10px 20px 30px;
padding；10px 20px 30px 40px;

padding-left:
padding-top
padding-right
padding-bottom

有效内容区 width,height

width:auto 取决于你是什么元素类型 100%/auto  盒子有内边距时 会自动进行内减
height:auto有内容撑开


width:100%
height:100%;  相对单位


width:100px;
height:100px;

width:2rem;
height:2rem; 相对于html根元素


min-width:最小宽度
max-width:最大宽度

div {
    width:80%;
    min-width:230px;
    max-width:600px;  [230px,600px]  如果80%计算结果是<230px的 那么最终取值是230px
}

min-height
max-height

对语义化的理解
什么是语义化？

1.合适的标签用在合适的位置

  1. 分为两大类 语义化 em,strong,ins,del,hi,ul li… 没有语义 div,span 不光有默认的样式 还要方便机器阅读

理解（好处）？

  1. 当没有css样式的时候，语义化标签形成的结构要更加清晰更易阅读，便于维护

  2. 搜索引擎的爬虫依赖语义化标签的内容确定网站的权重，有利于搜索引擎优化

  3. 类似于img身上的alt,title都有搜索引擎优化 相关 ，可以提高用户体验

码农也有爱情
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
认识css
Shao_mou_ren的博客
11-05 378
1. 认识css CSS 通常称为 CSS 样式表或层叠样式表（级联样式表），主要用于设置 HTML 页 面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边 距等）以及版面的布局等外观显示样式。 CSS 以 HTML 为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排 版等，而且还可以针对不同的浏览器设置不同的样式。 HTML 超文本标记/标签语言 结构层...
【前端学习-初阶-CSS】CSS层叠样式表（一）
qq_48234463的博客
02-27 477
前端学习-初阶
认识CSS之引入方式
榕城候佳人的博客
03-09 439
样式表优点缺点适用情况控制范围行内样式表书写方便，权重高结构样式混在一起少控制一个标签内部样式表部分结构和样式分离没有彻底分离较多控制一个页面外部样式表完全分离需要引入最多控制多个页面。
前端之CSS学习01-CSS介绍和CSS样式表
能力工场小马哥
03-19 399
00-HTML的局限性 背景知识: html: 只关注内容语义 不能满足设计者需求 操作html属性不方便 在html总添加样式,会造成页面比较臃肿 总结本课: 纯HTML页面不太美观,需要一种简单的技术来美化页面 01-CSS作用以及初识 CSS作用: 让我们的网页更加丰富多彩,布局更加灵活 让HTML从样式中脱离,实现了HTML专注去做结构呈现,样式交给CSS 理想的...
Web基础(从零开始)——CSS引入的三种方式（内部样式表、行内样式表、外部样式表）
qq_57633498的博客
11-11 1303
CSS三种样式表： 1.内部样式表：写到html内部，将所有的CSS代码抽取出来，单独放到一个<style>标签中。 <style>标签理论上可以放在HTML文档任何地方，但一般会放在文档的<head>标签中 此种方式可以控制整个页面的样式设置 代码结构清晰，但是并没有实现结构和样式完全分离，因为将CSS放在了HTML的页面中。 2.行内样式表：在元素标签内部的style属性中设定CSS样式，适合修改简单样式 <div style="color: r
CSS
04-10
CSS
CSS重置
02-17
CSS重置 一个微小的默认CSS重置基于： 和 安装 NPM： npm install --save-dev css-reset 纱： yarn add css-reset 手动安装 首先，让我们克隆此存储库： git clone https://github.com/mlaurel/css-reset.git ...
bootstrap.min.css
02-23
用于渲染前端静态页面
CSS Tutorial
06-20
CSS Basic CSS HOME CSS Introduction CSS Syntax CSS Id & Class CSS How To CSS Styling Styling Backgrounds Styling Text Styling Fonts Styling Links Styling Lists Styling Tables CSS Box Model CSS Box ...
bootstrap.css
01-27
bootstrap的css文件
CSS—初识
冯瑞姣
12-17 542
【前言】 HTML的局限性在于它只关心结构、语义、页面内容，而更好看的样式是还需要CSS来完成。下面就来认识一下CSS吧！ 【了解】 1.CSS能达到什么效果？ 可以让我们的网页更加丰富多彩，布局更加灵活自如。 2.CSS能做出什么贡献？ 可以让HTML从样式中脱离，实现了HTML专注去做结构呈现，样式交给CSS。 3.引进CSS，我们想要什么样的结果？ 让结构（html）与样式（...
应用css样式
qq_40792591的博客
09-12 144
1、内嵌样式 在头中<head>中使用<style>标签书写css样式，这样可以将页面的表现性和结构性实现很好的分离 <!doctype html> <head> <style type="text/css"> .day{ color:blue; } </style> </head> &l...
CSS：样式表
离开屏幕的光，哪盏灯照亮你的孤独？
04-16 4495
CSS CSS（Cascading Style Sheets）美化样式。 CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。 CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。 CSS的...
scss概念及使用
m0_74293254的博客
07-10 907
/ 样式规则使用参数在上面的例子中，@mixin 关键字定义了一个名为 mixin-name 的混合，可以接受多个参数（如果需要的话），并在其中定义一组样式规则。SCSS 的三种循环结构 @for、@each 和 @while 分别用于按照索引循环、遍历列表或 map 类型数据、以及根据条件循环生成样式。这些循环结构使得 SCSS 更加强大和灵活，能够根据需求生成复杂的 CSS 规则。在 SCSS 中，可以使用自定义函数来增强样式表的功能，这些函数可以接受参数并返回处理后的值。
在一个使用了 Sass 的 React Webpack 项目中安装和使用 Tailwind CSS
最新发布
Chloeeeeeeee的博客
07-11 180
在使用了 Sass 的 React 和 Webpack 项目中安装和使用 Tailwind CSS，可以按以下步骤进行：安装 Tailwind CSS 及其依赖，并初始化配置文件；创建 `postcss.config.js` 并配置 Tailwind CSS 插件；在 `src` 目录中创建 `index.css` 并引入 Tailwind 的基础、组件和工具类；更新 Webpack 配置以处理 PostCSS 插件和 Tailwind CSS；最后在组件中导入 `index.css` 和 Sass 文件
CSS实现从上往下过渡效果
m0_56164131的博客
07-11 120
要实现一个从上往下显示的过渡效果，可以使用CSS的@keyframes规则来创建一个动画，使得元素在垂直方向上逐渐改变其位置。
css 自定义变量 var()
Z_Wonderful的博客
07-10 163
css的一个函数：`var()`，此函数在有些场景下能优化不少代码量。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值