ICode9

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

CSS样式初级入门教程——持续更新

2021-10-05 11:59:46  阅读:143  来源: 互联网

标签:入门教程 元素 边框 初级 background div border 选择器 CSS


目录

五类CSS选择器

简单选择器

根据名称、id、类来选取元素,类名、id名不能以数字开头

[标签名]+[.#*]
.: 类选择
#: id选择
*: 全部选择
,: 作为一个组都被选择
p.center: 选择class=center 的p
p#center: 选择id=center 的p
p*: 选择所有p标签,设置其为该样式,该样式优先级最低
p, h: 选择p, h标签

典例

h, p.m2;
h, p,.m2;
h.m2, p.m2;
h, p .m2;
h, p#m2;
h, p*;
h, p, *;
......

组合器选择器

根据它们之间的特定关系来选取元素
后代选择器 (空格)
子选择器 (>)
相邻兄弟选择器 (+)
通用兄弟选择器 (~)

伪类选择器

伪类用于定义元素的特殊状态, 不同状态不同样式,根据特定状态选取元素。

标签 + : + 伪类名
div : hover   悬停状态的div
div : lang    不同语言定义不同规则

伪元素选择器

选取元素的一部分并设置其样式

标签 + :: + 伪类名
div :: first-letter   div首字母
div :: first-line   div首行

属性选择器

根据属性或属性值来选取元素

  • 标签 + [attribute=“value”]

    p[class=class_name]=p.class_name
    p[id=id_name]=p.id_name
    div[color=“red”] 颜色为red的div
    div[font-family=“黑体”] 字体为黑体的div

  • 标签 + [attribute~=“value”]

    选择属性名中含有value的标签

  • 标签 + [attribute|=“value”]

  • 标签 + [attribute^=“value”]

  • 标签 + [attribute$=“value”]

  • 标签 + [attribute*=“value”]

插入css样式的方法

优先级排序

  • 行内样式(在 HTML 元素中)
  • 外部和内部样式表(在 head 部分)
  • 浏览器默认样式

具体代码

  • 外部
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    
  • 内部
      <style>
        div{}
      </style>
    
  • 标签内
      <div style="color=redbackground-color=blue">
      </div>
    

注释

/*这是css注释*/
<!-- 这是html注释 -->

颜色

颜色名

color: red

rgb

(255, 0, 0)

hex

#ff0000

hsl

背景

  • background-color
  • background-image
    background-image: url("*.png");
  • background-repeat
    沿水平或竖直方向平铺图像
    background-repeat: repeat-x;
    background-repeat: repeat-y;
    background-repeat: no-repeat;
  • background-attachment
    指定滚动界面背景是否移动
    background-attachment: fixed;
    background-attachment: scroll;
  • background-position
    background-position: right top;
  • opacity(不透明度)
  • backkground
    简写,要按顺序
    background: red url("*.png") right top;

边框

样式

border-style 属性可以设置一到四个值(用于上边框、右边框、下边框和左边框)

border-style: dotted solid double dashed;

  • dotted - 定义点线边框
  • dashed - 定义虚线边框
  • solid - 定义实线边框
  • double - 定义双边框
  • groove - 定义 3D 坡口边框。效果取决于 border-color 值
  • ridge - 定义 3D 脊线边框。效果取决于 border-color 值
  • inset - 定义 3D inset 边框。效果取决于 border-color 值
  • outset - 定义 3D outset 边框。效果取决于 border-color 值
  • none - 定义无边框
  • hidden - 定义隐藏边框

宽度

border-width 属性可以设置一到四个值(用于上边框、右边框、下边框和左边框) - 基本单位以 px、pt、cm、em 计 - 预设值: thin、medium、thick ```border-width: 10px 20px 30px thin;``` ## 圆角 border-radius 属性可以设置一到四个值(用于上边框、右边框、下边框和左边框) ```border-radius: 5px 2px 8px 10px;```

边距

内外边距

外边距可简写为
margin: 5px 2px 8px 10px;

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left
  • auto
  • inherit 继承自父类元素

内边距可简写为
padding: 5px 2px 8px 10px;

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left
  • auto
  • inherit 继承自父类元素

合并外边距

具体见

宽高

height 和 width 属性不包括内边距、边框或外边距。它设置的是元素内边距、边框以及外边距内的区域的高度或宽度。可设置如下值:

  • auto 默认浏览器计算高度和宽度。
  • length 以 px、cm 等定义高度/宽度。
  • % 以包含块的百分比定义高度/宽度。
  • initial 将高度/宽度设置为默认值。
  • inherit 从其父值继承高度/宽度。

max-height, min-height
max-width, min-width
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Qeht5r9w-1633405906190)(resources\css模型.png)]

轮廓

outline, 轮廓与边框不同!轮廓是在元素边框之外绘制的,并且可能与其他内容重叠。同样,轮廓也不是元素尺寸的一部分;元素的总宽度和高度不受轮廓线宽度的影响。

  • outline-style: 同border-style
  • outline-color
  • outline-width: 同border-width
  • outline-offset: 在元素的轮廓与边框之间添加空间, 元素及其轮廓之间的空间是透明的。
  • outline

文本

  • background-color
  • color
  • text-align: center, justify, top, right…
  • direction
  • unicode-bidi
  • vertical-align: 设置元素的垂直对齐方式。
  • text-decoration 装饰, 值: none, overline, underline…
  • text-transform 属性用于指定文本中的大写和小写字母。它可用于将所有内容转换为大写或小写字母,或将每个单词的首字母大写。
    text-transform: lowercase;
    text-transform: capitalize;
    text-transform: uppercase; 
    

间距

  • text-indent 指定文本第一行的缩进
  • letter-spacing 指定文本中字符之间的间距
  • line-height 指定行之间的间距
  • word-spacing 指定文本中单词之间的间距
  • white-space 指定元素内部空白的处理方式

字体

  • font-family: “Times New Roman”, Times, serif;
  • font-style 属性主要用于指定斜体文本。
    normal - 文字正常显示
    italic - 文本以斜体显示
    oblique - 文本为“倾斜”(倾斜与斜体非常相似,但支持较少)
  • font-weight
    bold, normal
  • font-size
    1em 等于当前字体大小。浏览器中的默认文本大小为 16px。因此,默认大小 1em 为 16px。
    可以使用这个公式从像素到 em 来计算大小:pixels/16=em。
    %, px

图标

<i class=...> </i>

  • Font Awesome 图标
    <script src="https://kit.fontawesome.com/yourcode.js"></script>
  • Bootstrap 图标
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  • Google 图标
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

链接

<a><\a>

  • a:link 正常的,未访问的链接
  • a:visited 用户访问过的链接
  • a:hover 用户将鼠标悬停在链接上时
  • a:active 链接被点击时

列表

无序 <ul> </ul>
有序 <ol> </ol>

  • list-style-type 属性指定列表项标记的类型, circle, square,
    删除标记/项目符号
    list-style-type: none; padding: 0px; margin: 0px;
  • list-style-image 属性指定列表项标记为一个图像
  • list-style-position
  • border 表格边框
  • border-collapse: collapse; 合并边框
    Tips:
    • 在 元素上使用 :hover 选择器,以突出显示鼠标悬停时的表格行:
    • 为了实现斑马纹表格效果,请使用 nth-child() 选择器,并为所有偶数(或奇数)表行添加 background-color:
      tr:nth-child(even) {background-color: #f2f2f2;}
    • overflow-x:auto, 数据过长时自动生成滑动条

display

block 元素

  <div>
  <h1> - <h6>
  <p>
  <form>
  <header>
  <footer>
  <section>

inline 元素

  <span>
  <a>
  <img>

区别与联系

inline, 不完整展示内外编剧,不换行
block, 完整展示内外边距,但是会自动换行
inline-block, 完整展示内外边距,不换行

Tips:

  • 原本是inline元素设置display为block后会导致换行
  • display: none, visibility:hidden, 都可以隐藏元素,前者不占用空间,后者占用空间

布局

位置

position

  • z-index 属性指定元素的堆栈顺序, 元素是否可叠加

overflow

指定在元素的内容太大而无法放入指定区域时是剪裁内容还是添加滚动条。

  • visible 默认。溢出没有被剪裁。内容在元素框外渲染
  • hidden 溢出被剪裁,其余内容将不可见
  • scroll 溢出被剪裁,同时添加滚动条以查看其余内容-
  • auto 与 scroll 类似,但仅在必要时添加滚动条

浮动和清除

(类似word文档)的浮动, float 属性用于定位和格式化内容,例如让图像向左浮动到容器中的文本那里。

  • left 元素浮动到其容器的左侧
  • right 元素浮动在其容器的右侧
  • none 元素不会浮动(将显示在文本中刚出现的位置)。默认值。
  • inherit 元素继承其父级的 float 值

clear 属性指定哪些元素可以浮动于被清除元素的旁边以及哪一侧。

  • none 允许两侧都有浮动元素。默认值
  • left 左侧不允许浮动元素
  • right 右侧不允许浮动元素
  • both 左侧或右侧均不允许浮动元素
  • inherit 元素继承其父级的 clear 值
    Tips:
    使用该种技术用于并排
    • box-sizing 属性允许我们在框的总宽度(和高度)中包括内边距和边框,确保内边距留在框内而不会破裂。

透明度

  • opacity: 0.3; 这样设置所有子元素都继承该透明度
  • rgba(red, green, blue, alpha); 这样设置所有子元素都继承该透明度

透明悬停效果

img {
  opacity: 0.5;
}
img:hover {
  opacity: 1.0;
}

  • both 左侧或右侧均不允许浮动元素
  • inherit 元素继承其父级的 clear 值
    Tips:
    使用该种技术用于并排
    • box-sizing 属性允许我们在框的总宽度(和高度)中包括内边距和边框,确保内边距留在框内而不会破裂。

透明度

  • opacity: 0.3; 这样设置所有子元素都继承该透明度
  • rgba(red, green, blue, alpha); 这样设置所有子元素都继承该透明度

透明悬停效果

img {
  opacity: 0.5;
}
img:hover {
  opacity: 1.0;
}

参考文献
https://www.w3school.com.cn/css/css_specificity.asp

标签:入门教程,元素,边框,初级,background,div,border,选择器,CSS
来源: https://blog.csdn.net/mc17852636978/article/details/120612464

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

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

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

ICode9版权所有