前端之CSS样式

  • css介绍

    • css是为html标签设置样式的
    • css由选择器和声明组成
      • 声明包括属性和属性值
      • 声明之间用分号；隔开
    • css注释
      • /注释类容/
  • css的几种引入方式
    • 行内样式 不推荐使用

      • 直接在html标签中style属性中设置样式，不推荐使用，不方便后续更改
        1. <p style="color: red">Hello world.</p>
    • 内部样式
      • 嵌入式是将css样式集中写在网页标签标签对中
        1. <head>
        2.     <meta charset="UTF-8">
        3.     <title>Title</title>
        4.     <style>
        5.         p {color: #0000cc}
        6.     </style>
        7. </head>
    • 外部样式 推荐使用
      • 就是将css样式单独写在一个文件中，然后通过页面引入即可，推荐使用
      • 引入方法
        1. head>
        2.     <meta charset="UTF-8">
        3.     <title>Title</title>
        4.     <link rel="stylesheet" href="路径">
        5. </head>
  • css选择器
    • 基本选择器

      • id选择器 #d1 {color: red} id为d1的颜色为red
      • 标签选择器 div {color: red} 标签是div的颜色为red
      • 类选择器 .c1 {color: red} class为c1的颜色为red
      • 通用选择器 * {color：red} 所有标签颜色都为red，不推荐使用
    • 组合选择器
      • 后代选择器 div p {color: red}div标签内的p标签颜色为red
      • 儿子选择器 div>p {color: red}div标签的子级p标签颜色为red
      • 毗邻选择器 div+p div标签同级标签的下面p标签
      • 弟弟选择器 div~p div标签同级标签下的所有p标签
    • 属性选择器
      • 根据标签中属性样式 div[title]

        • div.p1 div且class为p1的标签
      • 根据标签中属性的具体值给定样式 div[title="hello"]
    • 分组和嵌套
      • 为多个标签给定相同的样式 div,p {color: red} 标签与标签之间用逗号隔开
      • 基本选择器之间可以任意嵌套组合使用
    • 不常用的选择器 
        1. /*找到所有title属性以hello开头的元素*/
        2. [title^="hello"] {
        3.   color: red;
        4. }
        6. /*找到所有title属性以hello结尾的元素*/
        7. [title$="hello"] {
        8.   color: yellow;
        9. }
        11. /*找到所有title属性中包含（字符串包含）hello的元素*/
        12. [title*="hello"] {
        13.   color: red;
        14. }
        16. /*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素：*/
        17. [title~="hello"] {
        18.   color: green;
        19. }
    • 伪类选择器
      • link 未访问的链接，

          1. a:link {
          2.   color: #FF0000
          3. }
      • visited 已访问的链接 
          1. a:visited {
          2.   color: #00FF00
          3. }
      • hover 鼠标移动到链接上才改变样式 
          1. a:hover {
          2.   color: #FF00FF
          3. }
      • active 选的链接改变样式 
          1. a:active {
          2.   color: #0000FF
          3. }
      • input 输入框获取焦点时样式 
          1. input:focus {
          2.   outline: none;
          3.   background-color: #eee;
          4. }
    • 伪元素选择器
      • first-letter 常用的给首字母设置特殊样式

          1. p:first-letter {
          2.   font-size: 48px;
          3.   color: red;
          4. }
      • before 在内容前插入内容，该内容不可被选定 
          1. p:before {content: "*"; color:red}
      • after 在内容尾插入内容， 
          1. p:after {content: "#"; color:red}
      • 注意:before 和after多用于清除浮动
    • 选择器优先级
      • 当选择器相同时，谁最后加载听谁的；
      • 选择器不同时，
        • 特殊情况下使用 !important 意思是不论优先级，必加载 不推荐使用 
            1. p {color: yellow!important;}
  • css相关属性
    • width 属性可以为元素设置宽度（块级标签才能设置宽度，而内联标签是由内容决定的）
    • height 属性设置高度
    • 设置字体的属性
      • font-family 可以把多个字体名称作为一个回退系统

          1. body {
          2.   font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
          3. }
          4. /*当系统不支持第一个，就会显示第二个字体，依次，都没有则显示系统默认字体*/
      • font-size 字体大小
      • font-weight 字的粗细
    • 文本属性
      • color 颜色

        • 直接输入颜色名
        • 十六进制 #fffff红蓝绿
        • rgb格式 rgb（255，255，255）
      • text-align 对齐方式 属性值
        • left 左边对齐 默认
        • center 居中
        • jusify 俩端对齐
        • right 右边对齐
      • text-decoration 属性用来给文字添加特殊效果
        • none 默认。定义标准的文本
        • overline 定义文本上一条线
        • line-through 定义穿过文本的一条线
        • linherit 继承父元素的text-decoration属性
        • 常用：去掉a超链接中的默认的下划线 
            1. a {text-decoration: none;}
      • 文本首行缩进
        • text-indent
    • 背景属性 background
      • 背景颜色 background-color
      • 背景图片 background-image: url()
      • 背景重复 background-repeat
        • no-repeat 不重复
        • repeat-x x轴重复
        • repeat-y y轴重复
        • repeat 默认重复
      • background-position 背景位置 
          1. background-position: right bottom;
          2. background-position: 200px 200px;
      • 背景属性可以简写： 
          1. background:#ffffff url('1.png') no-repeat right top;
      • 背景固定 backgound-attachment
        • fixed 固定
    • 边框 border 颜色，宽度，虚实，
      • border-style 风格

        • solid 实线
        • dashed 虚线
        • double 双实线
        • none 无边框
        • dotted 点状虚线
      • 通常宽度 ，风格，颜色，简写在一起 
          1. .c2 {border: 2px solid red;}
      • border-radius 实现画圆,可以调节其度数， 
          1. border-radius: 50%;
    • display 属性 用来控制html元素的显示效果的
      • none 元素存在，但是不在浏览器显示，且不占空间

        • display中的none和visibility中的hidden区别

          • none，隐藏且不占空间
          • hidden ，隐藏但是占位置，
      • inline 行内元素，运用将块级元素的块特点取消
      • block 将内联元素变为块级元素
      • inline-block 使元素同时具有行内元素和块级元素的特点
    • css盒子模型
      • 有图

      • margin（外边距） 用于控制元素与元素之间的距离，最基本的就是控制元素和空间之间的间隔，从视觉角度达到相互隔开的目的 
          1. margin: 0 auto;
          2. /*顺序为顺时针设置，上右下左，auto为系统自动调节，*/
          3. padding：5px 10px 15px 20px

          • 提供一个，用于四边；

          • 提供两个，第一个用于上－下，第二个用于左－右；

          • 如果提供三个，第一个用于上，第二个用于左－右，第三个用于下；

          • 提供四个参数值，将按上－右－下－左的顺序作用于四边；

      • border(边框) 围绕在内边距和内容外的边距
      • padding（内填充） 用于控制文本内容和边框之间的距离
      • Content（内容） 盒子的内容，显示文本和图像
    • 浮动float
      • 特点：浮动元素会生成一个块级块，本身不属于何种元素

        • 浮动的框可以向左向右移动，直到碰到边缘或碰到包含框或另一个浮动框的边框
        • 由于浮动框处于z轴上，它在页面上的空间可以被其他元素所占
      • 取值：
        • left，right，none是默认值，不浮动
      • 解决浮动的副作用使用clear
        • 让其页面位置不能被其他元素占用
        • 取值
          • left 左边不能浮动
          • right 右边不能浮动
          • both 俩边都不能浮动
        • 解决实例
          • 不推荐使用

            • 可以用在浮动元素，之后的元素类添加属性clear：both使其不占用浮动元素的页面空间
            • 也可以在后续元素前增加一个标签，标签中放clear：both，使其不占用浮动元素的页面空间
          • 推荐使用
            • 在祖先类（不能是body）元素中

                1. .clearfix:after {
                2.    content: '';
                3.    display: block;
                4.     clear:both
                5. }
    • overflow 溢出属性
      • hidden 内容会被修剪，且其余内容不可见
      • scroll 内容被修剪 ，但是浏览器会滚动以便显示其余内容
      • atuo 内容被修剪，浏览器自行处理
    • 定位 position
      • 对属性位置进行移动
      • relative 相对定位，相对于原来的位置进行移动
      • abslute 绝对定位 ，根据自己祖先的元素进行定位
      • fixed 固定，对象脱离页面，固定死位置，不会随着滚动而变化
    • z-index 设置z轴方向的层叠顺序
      • z-index：999
    • opacity 透明度
      • background-color: rgba(0,0,0,0.3) 设置背景颜色的透明度
      • opacity: 0.3 设置所有的透明度
      • 对于元素的取值为0~1之间，0为完全透明，1为完全不透明

前端知识之css样式的更多相关文章

  1. 前端基础：CSS样式选择器

    前端基础:CSS样式选择器 CSS概述 CSS是Cascading Style Sheets的简称,中文意思是:层叠样式表,对html标签的渲染和布局.CSS规则由两个主要的部分组成:1.选择器:2. ...

  2. 前端知识之CSS(1)-css语法、css选择器（属性、伪类、伪元素、分组与嵌套）、css组合器

    目录 前端基础之css 1.关于css的介绍 2.css语法 3.三种编写CSS的方式 3.1.style内部直接编写css代码 3.2.link标签引入外部css文件 3.3.标签内直接书写 4.c ...

  3. Web前端新人之CSS样式选择器

    最近在学习css样式.那么我就想先整理一下css样式的选择器 规则结构: 每个规则都有两个基本部分:选择器和声明块.声明块由一个或者多个声明组成,每个声明则是一个属性—值对(property-valu ...

  4. 前端(二)：css样式

    本节笔记根据css中文手册整理,内容已做成思维导图.下载地址https://files.cnblogs.com/files/kuaizifeng/css.xmind.zip. css(Csacadin ...

  5. 前端基础之css样式（选择器）

    一.css概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,对html标签的渲染和布局 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如 二.c ...

  6. 【前端知识体系-CSS相关】CSS基础知识强化

    1.CSS样式(选择器)的优先级? 1.1 权重的计算规则 第一优先级:无条件优先的属性只需要在属性后面使用!important.它会覆盖页面内任何位置定义的元素样式.(ie6支持上有些bug). 第 ...

  7. 前端知识之css

    css的几种引入方式 行内样式 行内式是在标记的style属性中设定css样式,不推荐大规模使用 <p style='color:red'>hello world</p> 内部 ...

  8. 【前端知识体系-CSS相关】CSS工程化方案

    1.如何解决CSS的模块化问题? 使用Less,Sass等CSS预处理器 使用PostCSS插件(postcss-import/precss) 使用webpack处理CSS(css-loader + ...

  9. 【前端知识体系-CSS相关】CSS预处理器

    1.常见的CSS预处理器有哪些? [!NOTE] css预处理器:用一种专门的编程语言,为CSS增加了一些编程的特性,将CSS作为目标生成文件,然后开发者就只要使用这种语言进行编码工作,可以让你的CS ...

随机推荐

  1. puppeteerExamples

    What can I do? Most things that you can do manually in the browser can be done using Puppeteer! Here ...

  2. git推送项目到github并使用gitee做镜像仓库

    2022最新版github入门教程,教你如何一步步创建自己的github账号并初始化仓库,然后使用git工具配置个人工作环境.配合gitee仓库,作为github的镜像仓库使用.这篇文章很基础,对萌新 ...

  3. CreateEvent进程同步

    CreateEvent进程间同步   CreateEvent可以创建或是打开一个命名或是未命名的event对象. HANDLE CreateEvent(   LPSECURITY_ATTRIBUTES ...

  4. Telnet拓展测试--在生产测试场景的应用

    本文关键词:流量测试.Telnet拓展测试.TCP/IP.时延 一.Telnet简介 Telnet协议是TCP/IP协议族中的一员,是Internet远程登录服务的标准协议和主要方式.它为用户提供了在 ...

  5. BI系统要自研还是采购？这篇文章告诉你

    首先说一下目前市面上的BI工具都有哪些吧.总体上,其实分为免费和付费两大阵营.免费阵营里,为首的当然是GA(也就是谷歌分析).PowerBI,但是由于有墙的限制,很多公司没法使用前者.付费阵营里,近两 ...

  6. OLAP阵营又增一猛将，比肩Power BI不是说说而已！

    说到大数据应用最多的技术,不得不提OLAP技术,在国内外,不论传统公司还是互联网公司,都开始利用OLAP技术分析挖掘大数据的价值.也许很多人对OLAP的概念还不是很清楚,简单来说,就把数据处理成数据立 ...

  7. 使用while循环和for循环输出2~100之间的素数（只能被1和自己整除的自然数）

    不管是while循环还是for循环,原理都是取根号,循环到取根号后的数,至于为什么需要循环到开根后的数,我想主要是因为一个数的分解因子在开根号后的数向上取整以下吧. 话不多说,上代码: while循环 ...

  8. 常用windows快捷键及cmd、dos命令

    Windows常用快捷键 #Alt+F4:关闭窗口.网页 #ctrl+C:复制 #ctrl+V:粘贴 #ctrl+X:剪切 #ctrl+Z:撤销 #ctrl+A:全选 #ctrl+S:保存 #shif ...

  9. 【windows 访问控制】十一、C# 实操 对象 System.Security.AccessControl 命名空间

    AccessControl 命名空间 结构图 解说: DirectorySecurity=目录ACLFileSecurity=文件ACLFileSystemAuditRule=目录和文件中SACL中的 ...

  10. 图解CPU缓存一致性问题

    产生背景 CPU的读取速度比内存的快,一个快一个慢,就会有矛盾,就会有人想要解决这个矛盾,所以就提出多级缓存来解决,如下图所示. L1级缓存:分为数据域和程序域. L2级缓存:二级缓存.  L3级缓存 ...