css基础样式

作者: 啊敏 | 来源:发表于2022-08-17 17:58 被阅读0次

CSS学习资源
【2016年特别福利】史上最全CSS学习资料大全
css基础
css基础（一）
CSS基础理解
03-CSS3
web前端入门到实战：css选择器和css文本样式相关
认识CSS（1）
CSS基础样式总结
css入门必学，基础重难点，css选择器

设置使用的字体

<style>
  使用选择器改变字体
    body {
     font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    }
    p:nth-child(1) {
     font-family: Sans-serif;
    }
    p:nth-child(2) {
     font-family: Monospace;
    }
    p:nth-child(3) {
     font-family: Cursive;
    }
 </style>
<body>
   <div> 生如蝼蚁, 当立鸿鹄之志, 命薄如纸应有不屈之心。 </div>
   <p>1.生如蝼蚁, 当立鸿鹄之志, 命薄如纸应有不屈之心。</p>
   <p>2.生如蝼蚁, 当立鸿鹄之志, 命薄如纸应有不屈之心。</p>
   <p>3.生如蝼蚁, 当立鸿鹄之志, 命薄如纸应有不屈之心。</p>
</body>

字体颜色

  <style>
使用不同的办法改变字体颜色
    /* 英文单词 */
    p:nth-child(1){
        color: red;
    }
    /* 十六进制,白色, 黑色, 灰色, 红色 */
    p:nth-child(2){
        color: #fff000;
    }
    /* rgb */
    p:nth-child(3){
        color: rgb(255, 70, 70);
    }
    /* rgba */
    p:nth-child(4){
        color: rgba(255, 70, 70,.3);
    }
    /* 透明色 */
    p:nth-child(5){
        color: transparent;
    }
</style>
<body>
  <p>1.生如蝼蚁, 当立鸿鹄之志, 命薄如纸应有不屈之心。</p>
  <p>2.生如蝼蚁, 当立鸿鹄之志, 命薄如纸应有不屈之心。</p>
  <p>3.生如蝼蚁, 当立鸿鹄之志, 命薄如纸应有不屈之心。</p>
  <p>4.生如蝼蚁, 当立鸿鹄之志, 命薄如纸应有不屈之心。</p>
  <p>5.生如蝼蚁, 当立鸿鹄之志, 命薄如纸应有不屈之心。</p>
</body>

字体粗细

  <style>
    p {
      width: 800px; 
      border: 1px solid; 
      font-size: 20px;
    }

    /* 给.box的9个p元素的font-weight分别设为100~900 */
    
    .box p:nth-child(1){
        font-weight: 100;
    }
    .box p:nth-child(2){
        font-weight: 200;
    }
    .box p:nth-child(3){
        font-weight: 300;
    }
    .box p:nth-child(4){
        font-weight: 400;
    }
    .box p:nth-child(5){
        font-weight: 500;
    }
    .box p:nth-child(6){
        font-weight: 600;
    }
    .box p:nth-child(7){
        font-weight: 700;
    }
    .box p:nth-child(8){
        font-weight: 800;
    }
    .box p:nth-child(9){
        font-weight: 900;
    }
    /* 给.box的p加粗 */
    .box2 p {
      /* 字体粗细 */
      font-weight: bold;
    }
  </style>
<body>
  <div class="box">
    <p>1.生如蝼蚁, 当立鸿鹄之志, 命薄如纸应有不屈之心。</p>
    <p>2.生如蝼蚁, 当立鸿鹄之志, 命薄如纸应有不屈之心。</p>
    <p>3.生如蝼蚁, 当立鸿鹄之志, 命薄如纸应有不屈之心。</p>
    <p>4.生如蝼蚁, 当立鸿鹄之志, 命薄如纸应有不屈之心。</p>
    <p>5.生如蝼蚁, 当立鸿鹄之志, 命薄如纸应有不屈之心。</p>
    <p>6.生如蝼蚁, 当立鸿鹄之志, 命薄如纸应有不屈之心。</p>
    <p>7.生如蝼蚁, 当立鸿鹄之志, 命薄如纸应有不屈之心。</p>
    <p>8.生如蝼蚁, 当立鸿鹄之志, 命薄如纸应有不屈之心。</p>
    <p>9.生如蝼蚁, 当立鸿鹄之志, 命薄如纸应有不屈之心。</p>
  </div>
</body>

文本对齐方式

  <style>
    p {
        width: 500px;
        border: 1px solid;
        height: 50px;
    }
    /* 第一行居中对齐 */
    p:nth-child(1){
        text-align: center;
    }
    /* 第二行左对齐 */
    p:nth-child(2){
        text-align: left;
    }
    /* 第三行右对齐 */
    p:nth-child(3){
        text-align: right;
    }
  </style>
<body>
  <p>1.生如蝼蚁, 当立鸿鹄之志</p>
  <p>2.生如蝼蚁, 当立鸿鹄之志</p>
  <p>3.生如蝼蚁, 当立鸿鹄之志</p>
</body>

文本行高

  <style>
  p {
    width: 200px;
    border: 1px solid;
    height: 100px;
  }
  /* 行高为px */
  p:nth-child(1){
      line-height: 30px;
  }
  /* 行高为倍数 */
  p:nth-child(2){
      line-height: 1.2;
  }
  /* 单行文本垂直居中 */
  p:nth-child(3){
      width: 400px;
      line-height: 100px;
  }
</style>
<body>
  <p>1.生如蝼蚁, 当立鸿鹄之志;生如蝼蚁, 当立鸿鹄之志;</p>
  <p>2.生如蝼蚁, 当立鸿鹄之志;生如蝼蚁, 当立鸿鹄之志;</p>
  <p>3.生如蝼蚁, 当立鸿鹄之志;生如蝼蚁, 当立鸿鹄之志;</p>
</body>

行高继承

 div继承了body 的行高
  <style>
    body{
        line-height: 1.5;
    }  
</style>
<body>
  <div>1.生如蝼蚁, 当立鸿鹄之志;生如蝼蚁, 当立鸿鹄之志;</div>
  <div>2.生如蝼蚁, 当立鸿鹄之志;生如蝼蚁, 当立鸿鹄之志;</div>
 <div>3.生如蝼蚁, 当立鸿鹄之志;生如蝼蚁, 当立鸿鹄之志;</div>
</body>

背景图片

background-repeat 取值
repeat 默认横向重复, 纵向重复, 不写效果也一样
no-repeat 不重复
repeat-x 横向重复
repeat-y 纵向重复

 <style>
  p {
    width: 200px;
    border: 1px solid;
    height: 200px;
    background: url('https://www.w3school.com.cn/ui2017/compatible_chrome.png');
  }
  /* 默认横向重复, 纵向重复 */
  p:nth-child(1){
      background-repeat: repeat;
  }
  /* 不重复 */
  p:nth-child(2){
      background-repeat: no-repeat;
  }
  /* 横向重复 */
  p:nth-child(3){
      background-repeat: repeat-x;
  }
  /* 纵向重复 */
  p:nth-child(4){
      background-repeat: repeat-y;
  }
</style>
<body>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
</body>

背景图片大小

background-size: contain；保持宽高比例, 长边拉伸至最大。
background-size: cover；保持宽高比例, 短边拉伸至最大, 长边会被截掉一部分
background-size: xx%, xx%; 不保持宽高比例, 可以设置任意数值或者百分比

    <style>
    p {
      width: 600px;
      border: 1px solid;
      height: 400px;
      background: url('https://www.w3school.com.cn/ui2017/compatible_chrome.png')
       no-repeat;
    }
  
    /* contain；保持宽高比例, 长边拉伸至最大。 */
   p:nth-child(1){
       background-size: contain;
   }
    /* cover；保持宽高比例, 短边拉伸至最大, 长边会被截掉一部分 */
   p:nth-child(2){
       background-size: cover;
   }
    /* (X Y)或者(xx% xx%) 不保持宽高比例, 可以设置任意数值或者百分比 */
    p:nth-child(3){
        background-size:100% 50%;
    }
  </style>
<body>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
</body>

背景图片位置

  <style>
    p {
      height: 100px;
      width: 200px;
      border: 1px solid;
     /* background-image: url(../img/compatible_chrome.png); */
     background-image: url(https://www.w3school.com.cn/ui2017/compatible_chrome.png);
      background-repeat: no-repeat; 
    }
  
    P:nth-child(1) {
      /* 使用px */
      background-position: 10px;
    }
  
    P:nth-child(2) {
      /* 使用百分比 */
      background-position: 10%;
    }
  
    P:nth-child(3) {
      /* 使用定位单词,两个选项 */
      background-position: center left;
    }
  
    P:nth-child(4) {
       /* 使用定位单词, 只有一个选项 */ 
       background-position: center;
    }
  </style>
<body>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
</body>

背景图合并写法

<style>
    p {
      width: 400px;
      border: 1px solid;
      height: 200px;
      /* 背景图片设置为不重复,位置放在右下角 */
      background: url(https://www.w3school.com.cn/ui2017/compatible_chrome.png) 
        no-repeat center left;
    }
  </style>
<body>
    <p></p>
</body>

边框

第一个选项: 边框大小
第二个选项: solid(实线)或虚线
第三个选项: 边框颜色,
取值为none时, 没有边框
边框是可以分开写
border-top 上边框
border-bottom 下边框
border-left 左边框
border-right 右边框

<style>
    p{
        width: 100px;
        height: 100px;
    }
    p:nth-child(1){
        border: 1px solid;
    }
    p:nth-child(2){
        border-top: 1px solid #000;
        border-bottom: 1px solid #000;
    }
</style>
<body>
    <p></p>
    <p></p>
  </body>

圆角

使用border-radius设置元素的圆角, 取值可以使用px或者百分比
当border-radius的值为50%的时候, 元素是个圆(前提是元素宽高相等)

  <style>
    p{
        width: 100px;
        height: 100px;
        border: 1px solid;
    }
    p:nth-child(1){
        border-radius: 10px;
    }
    p:nth-child(2){
        border-radius: 50%;
    }
</style>
<body>
  <p></p>
  <p></p>
</body>

三角形

宽高设为0
边框设为20px(根据需要)
除底部边框外, 其它边框设为透明色

  <style>
    p{
        width: 0;
        height: 0;
        border: 50px solid red;
        /* border-radius: 50%; */
        border-right-color: transparent;
        border-left-color: transparent;
        border-bottom-color: transparent;
        transform: rotate(45deg);
    }
</style>
<body>
  <p></p>
</body>

内边距

用padding样式来设置元素边缘跟元素内容之间的空白, padding的取值有
padding-top 上
padding-bottom 下
padding-left 左
padding-right 右

  <style>
    p {
        width: 200px;
        border: 1px solid;
    }
    p:nth-child(1) {
        /* 分开写 */
        padding-top: 10px;
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
    }
    /* 合并写法: 1个选项 */
    p:nth-child(2) {
        padding: 10px;
    }   

    /*  合并写法: 4个选项上-右-下-左(顺时针) */
    p:nth-child(3) {
        padding: 10px 20px 30px 40px;
    }
     /*  合并写法: 3个选项上-左右-下 */
     p:nth-child(4) {
        padding: 10px 20px 30px;
    }
     /*  合并写法: 2个选项上下-左右 */
     p:nth-child(5) {
        padding: 10px 20px; 
    }
</style>
<body>
    <p>
      1.天道酬勤 天道酬勤 天道酬勤
   </p>
  <p>
      1.天道酬勤 天道酬勤 天道酬勤
   </p>
  <p>
      1.天道酬勤 天道酬勤 天道酬勤
   </p>
  <p>
      1.天道酬勤 天道酬勤 天道酬勤
   </p>
  <p>
      1.天道酬勤 天道酬勤 天道酬勤
   </p>
</body>

盒子模型

W3C标准盒模型(默认):
padding和border都会撑开盒子，改变盒子的宽度高度
总宽度：width + 左右border宽度 + 左右padding宽度 + 左右margin宽度
内盒宽度：width + 左右border宽度 + 左右padding宽度
IE盒模型:
padding和border不会撑开盒子，不会改变盒子的宽度，盒子的内容会相应缩小
总宽度：width + 左右margin宽度
内盒宽度： width
3.改变盒模型的样式
使用box-sizeing可以修改改变盒模型

固定定位

将元素设置为 position:fixed 元素可以固定在屏幕的任何一个位置
元素设置为固定定位之后, 元素的不再是块级元素, 而是变成 "行内块级", 若是元素没有内容, 且没有设置宽度, 那么它的宽度为0。

<style>
    p{
        position: fixed;
        top: 0;
        width: 100%;
        height: 40px;
        background-color: green;
    }
</style>
<body>
    <p>a</p>
</body>

相对定位和绝对定位

给元素设置为绝对定位之后, 元素拥有和固定定位类似的特征:

元素变成"行内块级"
脱离文档流, 跟在其后面的元素会"陷进去"
也可以使用z-index来调整元素的叠放顺序

可以使用相对定位和绝对定位把子元素放置到父元素的任意一个位置, 步骤:

把父元素设置为相对定位
把子元素设置为绝对定位
设置子元素在父元素中的位置

  <style>
    .aa{
        width: 100%;
        height: 50px;
        top: 0;
        position: relative;
        background-color: red;
    }
    .bb{
        width: 20px;
        height: 20px;
        right: 0;
        bottom: 0;
        position: absolute;
        background-color: green;
    }
</style>
<body>
  <div class="aa">
    <div class="bb"></div>
  </div>
</body>

文本溢出

当元素里的内容大于元素的宽度或者高度的时候, 内容就会溢出, 我们使用overflow(overflow-x, overflow-y)样式来处理溢出, 它的取值
hidden 隐藏
scroll 滚动
auto 自动
注: 当内容是没有空格的字母时, 不会自动换行, 比如 ppppppppppp

  <style>
    p{
        width: 150px;
        height: 50px;
        border: 1px solid red;
    }
    p:nth-child(1) {
       /*溢出隐藏*/
       overflow: hidden;
    }
    p:nth-child(2) {
       /*水平方向溢出用滚动条*/
       overflow-x: scroll;
    }
    p:nth-child(3) {
        /* 没有溢出时,同样会有滚动条 */
       overflow: scroll;
    }
    p:nth-child(4) {
       /*垂直方向溢出用滚动条*/
        overflow-y: scroll;
    }
    p:nth-child(5){
        overflow: auto;
    }
</style>
<body>
  <!-- hidden 隐藏 -->
  <p>ppppppppppppppppppppppppppppppppppppppppppppp</p>
  <!-- scroll 滚动条 -->
  <p>ppppppppppppppppppppppppppppppppppppppppppppp</p>
  <!-- scroll 没有溢出时,同样会有滚动条的'轨道'' -->
  <p>ppppppppppp</p>
  <!-- auto 自动 -->
  <p>ppppppppppppppppppppppppppppppppppppppppppppp</p>
  <!-- auto 不溢出时没有滚动条 -->
  <p>ppppppppppp</p>
</body>

溢出用省略号显示

单行文本溢出

  <style>
     p {
       width: 300px;
       border: 1px solid;
       line-height: 20px;
       height: 30px;
        /*内容溢出隐藏*/
        overflow: hidden;
        /*遇到空白怎么处理*/
        white-space: nowrap;
        /*文字溢出设置*/   
       text-overflow: ellipsis;
     }
   </style>
 <body>
   <p>
       哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 
   </p>
 </body>

多行文本溢出

  <style>
     p {
       width: 300px;
       border: 1px solid;
       line-height: 20px;
       height: 40px; 
       display: -webkit-box;
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 2; 
       overflow: hidden;
     }
   </style>
 <body>
   <p>
       哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 
       哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 
       哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 
       哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 
       哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 
   </p>
 </body>

CSS学习资源
基础篇 CSS 最核心的几个概念 CSS 简写指南 CSS样式基础 CSS样式设置 CSS布局模型 CSS文字排版...
【2016年特别福利】史上最全CSS学习资料大全
基础篇 CSS 最核心的几个概念 CSS 简写指南 CSS样式基础 CSS样式设置 CSS布局模型 CSS文字排版...
css基础
1 、 CSS样式的基础知识 1 认识CSS样式 CSS全称为“层叠样式表 (Cascading Style Sh...
css基础（一）
css基础样式类型行内样式追命内部样式 div { color: red ; } ...
CSS基础理解
CSS基础理解一、CSS 加载方式有几种 CSS可以通过使用外部样式表、内部样式表、内联样式来使用。外部样式表...
03-CSS3
CSS教程 01-CSS入门基础课程概要一、CSS介绍 CSS概述 CSS指层叠样式表 CSS样式表极大地提高...
web前端入门到实战：css选择器和css文本样式相关
css基础-css选择器和css文本样式相关：使用link链入外部样式，页面加载时会同时加载样式 @import...
认识CSS（1）
1、CSS的定义 css指层叠样式表，以html为基础，控制页面布局和样式 html：页面结构 css：页面样式表...
CSS基础样式总结
二、CSS基础样式 1、CSS样式简介（1）内联样式在标签内部通过style属性设置元素的样式存在问题：使用内...
css入门必学，基础重难点，css选择器
css基础一.什么是CSS CSS是级联样式表 CSS术语标记语言,没有逻辑 CSS作用完成网页内容的样式与布...

css基础样式

设置使用的字体

字体颜色

字体粗细

文本对齐方式

文本行高

行高继承

背景图片

背景图片大小

背景图片位置

背景图合并写法

边框

圆角

三角形

内边距

盒子模型

固定定位

相对定位和绝对定位

文本溢出

溢出用省略号显示

相关文章

CSS学习资源

【2016年特别福利】史上最全CSS学习资料大全

css基础

css基础（一）

CSS基础理解

03-CSS3

web前端入门到实战：css选择器和css文本样式相关

认识CSS（1）

CSS基础样式总结

css入门必学，基础重难点，css选择器

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读