ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

零基础学css记忆篇2000字

2021-09-08 23:33:41  阅读:120  来源: 互联网

标签:文本 字体大小 text 2000 记忆 CSS font 选择器 css


1.什么是css?
      1. 层叠样式表  Castcading  Style  Sheets
    2.css作用:更加专注于页面的样式表现
    3. CSS语法 :  选择器{样式名:样式值;}
    4.CSS的注释:/*注释内容*/
2.HTML引入CSS
    1.行内  <p  style="coclor:red;"></p>
    2.内嵌
        <style  type="text/css">选择器{样式名:样式值;}........</style>
    3.外联
        <link rel="stylesheet"  type="text/css" href="xx.css">
    4.@import  url(xxx.css)  多个css之间导入
3.CSS  常用选择器
    1. *  通配符  选择器
    2  .tag  标签  选择器
    3.  Class  类  选择器
    4.  ID  id选择器
    5.  群组选择器  [,]  逗号
    6.后代选择器 [  ]  空格
    7.  直接子集  [>]   大于号
    8.  下一个相邻兄弟  [+]  加号
    9.   通用兄弟选择器【~】  它以下的所有兄弟
    选择器使用
        1.  p:first-child  选择第一行p标签
        2.  img:nth-of-type(标签顺序)     指定选择第几个ming标签
4.选择器的权重优先级
    !important_10000  >  行内_1000   >   ID_100   >   Class_10   >   tag_1   >   *_0
    多个并联选择器,使用权重求和计算
5.  CSS  长度单位
    1.PX  绝对像素
    2. %  相对于 父节点的  百分比
    3.  VH/VW  相对于  可视窗口的  百分比  大小
    4.  em  相对于  父节点的  字体大小
    5.  rem  相对于  根节点  的  字体大小
    6.  cm,mm,pt  适合打印的单位
6. CSS颜色单位
    1.  十六进制   #ff0000
    2.  rgb()/rgba()   rgb(255,0,0)
    3.英文单词  red
    字体颜色, 背景色background—color  边框色border—color
7.字体文本样式
    1.字体大小  font—size:30px
    2.字体加粗   font—weight:900; (100—900 bold  bolder   light   lighter)
    3.字体倾斜  font—style:italic;(normal正常,italic倾斜)
    4.字体类型   font—family:“楷体”;
    简写:font:倾斜  加粗   字体大小/行高   楷体
    5.字体对齐   text—align:center  left  right;
        一行文字垂直居中:块高宽(height:58px;)  等于  行高(lin—height:58px;)   
    6.文本装饰线   text—decoration:overline  上划线,  line—through 删除线,underline 下划线  none不加
        10.块元素的下划线(只显示每行下边框)  border—bottom:1px  #cccccc    solid;
    7.文本首行缩进  text—indent:2em;
    8.行高   line —height:50px;
    9.英文变换   text-transform: capitalize  uppercase  lowercase;
    10.空白处理   white—space:  mormal默认    nowrap不换行   pre格式化文本
    11.溢出选项   overflow: hidden隐藏    scroll水平垂直滑动条   auto根据内容自动
    12.文本溢出   text—overflow:normal默认   ellipsis(文本溢出显示......)
    13.单词间距  word—spacing:  10px
    14.字符间距  letter—spacing:10px
    15.display:inline—block;  修改类型为   行内块  支持宽高  不换行
8.如何去除行内元素的空格 
    1.父节点添加  font—size:0px;
    2.子节点 还原字体大小
9.文本对齐方式
    text—align:
        left  左  默认
        center  中间
        right  右
        justify  两端对齐  非最后一行 起作用
    text—align—last:(最后一行对齐方式)此属性默认继承父节点、需要重新定义
        left  左   默认
        center
        right 
        justify  两端对齐
    vertical—align:
        top  顶
        middle  中 
        bottom  低
        baseline  基线  默认

标签:文本,字体大小,text,2000,记忆,CSS,font,选择器,css
来源: https://blog.csdn.net/yechenyhsa/article/details/120191278

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有