理解CSS|青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第3天

常用CSS属性

字体样式

属性	含义
font-size	字体大小
font-weight	字体粗细
font-style	字体样式
font-family	字体类型
font	简写，font的属性连写

• font-size

font-size取值为inherited继承，默认从父标签继承字体大小（默认值），可以用px表示多少像素，可以用%相对父标签字体大小的百分比，还有em倍数，来表示相对于父标签字体大小的倍数。

• font-weight

font-weight取值normal普通（默认），bold粗体，也可以用100~900的整百数表示，400为普通，700为粗体。由于不是所有的字体都提供了9种粗细，因此部分取值页面会没有变化。

• font-style

font-style有两种，normal普通， italic斜体

• font-family

font-family可以选择电脑内已有的字体

• font-family

font相关属性的连写为 font:style weight size family

<p>今天学css</p>
<style>
p{
            /* 字体颜色 */
            color: red;
            /* 字体大小 */
            font-size: 50px;
            /* 背景颜色 */
            background-color: blue;
            /* 字体粗细 */
            font-weight: 600;
            /* 字体倾斜 italic倾斜*/
            font-style: italic;
            width: 700px;
            height: 60px;
            /* 字体 font-family*/

            /* font:style weight size/line-height 字体 */
            

        }
        </style>

文本样式

属性	含义
color	字体颜色
line-height	行高
text-align	水平对其方式
vertical-align	垂直对齐方式
text-indent	首行缩进
text-decoration	文本修饰
text-transform	字母大小写转换
letter-spacing	字符间距
word-spacing	单词间距
white-space	空白的处理方式

• line-height

line-height可以数字+px，或者用数字直接表示倍数。行高可以与font连写为font:style weight size/line-height family

• text-align

text-align有三种，left左对齐， center居中对齐，right右对齐

• vertical-align

vertical-align有三种，top、middle、bottom

• text-indent

text-indent可以数字+px，也可以数字+ em，一般常用到的首行缩进为2em

• text-decoration

text-decoration文本修饰一般有underline下划线、overline上划线、line-through删除线，还有none无装饰线常用于消除a标签默认的下划线

• text-transform

capitalize 表示将每个单词的首字母转换成大写，其它字符不变；uppercase 表示将文本的所有字符转换成大写；lowercase 表示将文本的所有字符转换成小写；

<div class="text1">暂且不说这一专业本身具备的实力，光看这一专业的建设与发展背景，就足以预见广工这一专业的广阔前景。据小编所知，广工这一专业自创办以来始终坚持以学生为中心、以产出为导向，致力于培养宽口径、厚基础、重创新、强实践的电子工程技术人才。而这类人才正是珠三角优势电子信息产业与粤港澳大湾区建设急需的人才。</div>
<style>
 .text1{
            /* 首行缩进 */
            text-indent: 2em;
            /* 文本对齐 */
            text-align: left;
            /* 文本修饰  下划线underline 删除线line-through 上划线overline */
            text-decoration: underline;
            /* 行高 3px 或者 2（数字为倍数） */
            line-height: 2;
            /* line-height：40px */


        }
    </style>

背景样式

属性	含义
background-color	背景颜色
background-image	背景图片
background-repeat	背景图片的重复方式
background-position	背景图片的显示位置
background-attachment	背景图片是否跟随滚动

• background-image

必须使用url()方式指定图片的路径。如果是在css样式文件中使用相对路径，此时是相对于css文件，不是相对html文件。

• background-repeat

取值：repeat(默认水平和垂直方向都平铺)，repeat-x是沿着水平方向（x轴）平铺，repeat-y是沿着垂直方向（y轴）平铺，no-repeat是不平铺

• background-position

元素显示模式

块级元素

• 独占一行，可以设置宽高
• div、p、h系列、ul、li、dl、dt、dd等

行内元素

• 一行可以显示多个，宽度和高度默认由内容撑开，不可以设置宽高
• a、span、b、u、i、s等

行内块元素

• 一行可以显示多个
• 可以设置宽高
• input、textarea、button、select等

元素显示模式转化

属性	效果
display：block	转化为块级元素
display：inline-block	转换成行内块元素
display：inline	转换成行内元素

    <a href="# ">导航1</a>
    <a href="# ">导航2</a>
    <a href="# ">导航3</a>
    <a href="# ">导航4</a>
    <a href="# ">导航5</a>
    <style>
        a{
            color: white;
            text-decoration: none;
            text-align: center;
            line-height: 50px;
            background-color: red;
            height: 50px;
            width: 80px;
            display: inline-block;

        }


    </style>

CSS盒子

盒子模型如下：

• border

border：10px solid red

solid为实线，dashed为虚线，dotted为点线

border-方位名词可给盒子的某个方向单独设置边框

• padding

paddong属性可以当作复合属性使用，表示单独设置某个方向的内边距

/*padding最多取4个值*/
/*4值:上 右 下 左*/
padding:10px 20px 40px 80px;
/*3值：上 左右 下*/
padding:10px 40px 80px;
/*2值：上下 左右*/
padding:10px 80px;

• 给盒子设置border和padding时，盒子会被撑大。不想盒子被撑大，可以手动内减或者自动内减，给盒子设置属性box-sizing:border-box浏览器会自动计算多余大小，自动在内容中减去。

• margin

margin表示外边距，用法同上

margin:0 auto;

auto可设置版心居中

• 部分标签会有默认的margin和padding，可以在项目开始前清除这些默认的内外边距，后续自己设置

*{
  margin:0;
  padding:0;
  }

<div class="new">
        <h2>最新文章/New Articles</h2>
        <ul>
            <li><a href="#" >北京招聘网页设计，平面设计，php</a></li>
            <li><a href="#" >体验JavaScript的魅力</a></li>
            <li><a href="#" >jquery世界来临</a></li>
            <li><a href="#" >网页设计师的梦想</a></li>
            <li><a href="#" >jquery中的链式编程是什么</a></li>
        </ul>
    </div>
 <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .new{
            width: 500px;
            height: 400px;
            border: 1px solid #ccc;
            margin: 50px auto;
            padding: 42px 30px;
            

        }
        h2{
            border-bottom: 1px solid #ccc;
            font-size: 30px;
            line-height: 1;
            padding-bottom: 9px;

        }
        /* 去掉列表的符号 */
        ul{
            list-style: none;
        }
        li{
            height: 50px;
            border-bottom: 1px dashed #ccc;
            line-height: 50px;
            padding-left: 28px; ;
            
        }
        a{
            text-decoration: none;
            color: #666;
            font-size: 18px;

        }
    </style>

总结

今天学习了css的一些常用的属性，从字体、背景、文本等格式去设置，还认识了网页布局的基础盒子结构，将页面中所有元素都看作是一个盒子，从内边距、外边距等去布局。