day33 前端之css

css简介

  1. CSS（Cascading Style Sheet，层叠样式表）定义如何显示HTML元素。
  2. # 语法结构
  3. 选择器 {
  4.     属性名1，属性值
  5.     属性名2，属性值
  6. }
  7. # css注释
  8.     /*单行注释*/
  9.     /*
  10.     多行注释
  11.     多行注释
  12.     */
  13.      /*功能注释注释*/
  14. # css的三种引入方式
  15. 1.<style>
  16. 	h1 {
  17.         color:red;
  18.     }
  19. 2.<link rel="stylesheet" href="mycss.css">
  20. 3.<h1 style="color:blue"> hello baby<h1> # 行内式

基本选择器

  1. 1.id选择器
  2. 2.类选择器
  3. 3.标签选择器
  4. 4.通用选择器
  5. <!DOCTYPE html>
  6. <html lang="en">
  7. <head>
  8.     <meta charset="UTF-8">
  9.     <title>Title</title>
  10.     <style>
  11.         /*id选择器*/
  12.         #d1 {
  13.             color: green;
  14.         }
  16.         /*类选择器*/
  17.         .c1 {
  18.             color: green;
  19.         }
  20.     /*标签选择器*/
  21.         span {
  22.             color: gray;
  23.         }
  24.     /*    通用选择器*/
  25.         * {
  26.             color: red;
  27.         }
  28.     </style>
  30. </head>
  31. <body>
  32. <div id="d1">div1</div>
  33. <div>div2</div>
  34. <span class="c1">span1</span>
  35. <span class="c2">span2</span>
  36. </body>
  37. </html>

属性选择器

  1. <style>
  2.         [username] {  # 根据属性查找
  3.             color: red;
  4.         }
  6.          [username='ly'] {  # 根据条件查找
  7.             color: red;
  8.         }
  10.          div[username='ly'] {  # 可以加div限制
  11.             color: red;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <div username="ly">div</div>
  17.     <span username>span</span>
  18.     <p username="ly">p</p>
  19. </body>

组合和嵌套

  1. 后代选择器：
  2.     /*li内部的a标签设置字体颜色*/
  3.     li a {
  4.       color: green;
  5.     }
  6.  # /*逗号表示并列关系*/
  7.     #d1, .c1 {
  8.      color: red;
  9.     }

伪类选择器

  1.     <style>
  2.         a {
  3.             color: gray;
  4.         }
  6.         # /*鼠标悬浮时候的样式， 掌握主*/
  7.         a:hover {
  8.             color: red;
  9.         }
  11.         # /*按住鼠标左键不放松的样式*/
  12.         a:active {
  13.             color: green;
  14.         }
  16.         # /*访问之后的样式*/
  17.         a:visited {
  18.             color: blue;
  19.         }
  20.     </style>
  21. </head>
  22. <body>
  23. <a href="">点我哦</a>
  24. </body>

伪元素选择器

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <title>Title</title>
  4.     <style>
  5.         p:first-letter {  # 设置首字母颜色
  6.             color: red;
  7.             font-size: 24px; # 设置字体大小
  8.         }
  10.         p:before {  # 给字体前面加字，但不能选择加的字
  11.             content: 'ly is nb';
  12.             font-size: 28px;
  13.             color: red;
  14.         }
  16.         /*解决父标签塌陷问题*/
  17.         p:after {
  18.             content: 'ly is nb';
  19.             font-size: 28px;
  20.             color: green;
  21.         }
  22.     </style>
  23. </head>
  24. <body>
  25. <p>
  26.     当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，
  27. </p>
  28. </body>

选择器的优先级

  1. 选择器优先级
  2. 1. 选择器相同的情况
  3.         离谁越近就听谁的
  4. 2. 选择器不同的情况
  5.        行内式 > id选择器 > 类选择器 > 标签选择器

设置长宽

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <title>Title</title>
  4.     <style>
  5.         div {
  6.             width: 100px;
  7.             height: 100px;
  8.             background: red;  # 背景颜色
  9.         }
  10.         span {
  11.             # /*行内元素不能设置宽和高*/
  12.             /*width: 100px;*/
  13.             /*height: 100px;*/
  14.             background: green;
  15.         }
  16.     </style>
  17. </head>
  18. <body>
  19. <div>div</div>
  20. <span>span</span>
  21. </body>

字体属性

  1. font-size: 20px;
  2.             /*颜色的英文名*/
  3.             color: limegreen;
  5.             /*范围是0-255*/
  6.             color: rgb(101,119,120); # rgb颜色设置
  8.             /*a的范围是0-1*/
  9.             color: rgba(101,119,120, 0.9); # 透明度
  11.             /*颜色编号，表示的颜色最多，1600w*/
  12.             /*color: #757575;*/  # rgb颜色编号
  13.             /*color: red;*/
  15.             font-weight: bolder;  # 字体加粗
  17.             /* 范围是100-900的整数*/
  18.             font-weight: 800; # 自定义设置字体粗细

文字属性

  1.         p {
  2.             text-align: left; # 文字靠左对齐
  3.             text-align: center; # 文字居中
  4.             text-align: right; # 文字靠右对齐
  6.             text-decoration: underline; # 文字加下划线
  7.             text-decoration: line-through; # 文字加中划线
  8.             text-decoration: overline; # 文字加上划线
  9.             font-size: 20px; # 设置文字大小
  10.             text-indent: 40px; # 首行缩进
  11.         }
  12.         a {  # 去掉“点我”的下划线
  13.             # 重点掌握
  14.             text-decoration:none;
  15.         }
  16. <a href="">点我</a>

背景属性

  1.     <style>
  2.         div {
  3.             width: 400px;
  4.             height: 400px;
  5.             background: red; # 背景颜色
  6.             background-color: red;
  7.             background-image: url("1234.png"); # 导入背景图片的地址
  8.             background-repeat: repeat-x; # 设置x轴不重复
  9.             background-repeat: repeat-y; # 设置y轴不重复
  10.             background-repeat: no-repeat; # 设置不重复
  11.             background-position: center center; # 设置图片居中
  12.             background-position: 20px 50px; # 移动图片
  14.             /*只要前缀一样的情况，都可以简写*/
  15.             background:   no-repeat center center url("1234.png"); #这行就表示上面一串了
  16.             border: 3px solid red;
  17.         }
  18.     </style>

边框

  1. 简写的：
  2.     border-radius: 50%  # 把正方形变成一个圆形:
  3.     border: 3px solid red; # 简写代表上面一串代码
  4. 边框样式：
  5.     1.none：无边框
  6.     2.dotted：点状虚线边框
  7.     3.dashed：矩形虚线边框
  8.     4.solid：实线边框
  9. p {
  10.             border: 1px solid red;
  11.             border-width: 3px;
  12.             border-style: dotted;
  13.             border-color: red;
  15.             border-left-color: red; # 设置左边边框
  16.             border-left-style: solid; # 设置边框实心
  17.             border-left-width: 10px; # 设置边框的粗细
  19.             border-top-color: green; # 设置边框上边
  20.             border-top-style: dotted;
  21.             border-top-width: 5px;
  23.             border-right-color: green; # 设置右边
  24.             border-right-style: dotted;
  25.             border-right-width: 5px;
  27.             border-bottom-color: green; # 设置上面
  28.             border-bottom-style: dotted;
  29.             border-bottom-width: 5px;
  31.             border: 3px solid red; # 简写代表上面一串代码
  32.         }
  34.         div {
  35.             width: 200px;
  36.             height: 200px; # 成一个正方形
  37.             background: red;
  38.             border-radius: 100px; # 把四个角往里面缩成一个圆形
  39.             border-bottom-left-radius: 100px; # 左下方缩角
  40.             border-bottom-right-radius: 100px; # 右下方缩角
  41.             border-radius: 50%; # 简写，直接成圆角
  42.         }
  43.     </style>

display属性

  1. 隐藏两种方式：
  2. 1.display: block;隐藏之后，被隐藏的位置还在
  3. 2.display: none;隐藏之后，被隐藏的位置不在
  4.     #d1 {
  5.             width: 100px;
  6.             height: 100px; # 需求是两个块级元素在一行
  7.             background: red;
  8.             display: inline-block; # 块级元素和行内元素都具备
  9.         }
  11.         #d2 {
  12.             width: 100px;
  13.             height: 100px;
  14.             background: green;
  15.             display: inline-block; # 块级元素和行内元素都具备
  16.         }
  18.         #d3 {               # 需求是把两个行内元素放在两行
  19.             width: 100px;
  20.             height: 100px;
  21.             display: block; # 把行内元素设置为块级元素
  22.             background: red;
  23.         }
  25.         #d4 {
  26.             width: 100px;
  27.             height: 100px;
  28.             display: block; # 把行内元素设置为块级元素
  29.             background: green;
  30.         }
  32.         #d5 {
  33.             width: 100px;
  34.             height: 100px;
  35.             /*隐藏*/
  36.             display: none;  # 用来隐藏之后，被隐藏的位置不在
  37.             background: red;
  39.         }
  41.         #d6 {
  42.             width: 100px;
  43.             height: 100px;
  44.             display: block; # 用来隐藏之后，被隐藏的位置还在
  45.             background: green;
  46.         }
  47.     </style>

css盒子模型

  1. 盒子属性：
  2.     1.margin:用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
  3.     2.padding:用于控制内容与边框之间的距离；
  4.     3.Border(边框):围绕在内边距和内容外的边框。
  5.     4.Content(内容):盒子的内容，显示文本和图像。
  6. 外边距简写：margin: 5px 10px 15px 20px;
  7. 顺序：上、右、下、左
  8. 居中：margin: 0 auto;
  9. 内填充：padding: 5px 10px 15px 20px;
  10.             # 第一个值代表上下，第二个代表左右
  11.             margin:10px 20px;
  12.             # 第一个值代表上，第二个代表左右,第三个代表下
  13.             margin:10px 20px 30px;
  14.             # 上 右 下 左
  15.             margin:10px 20px 30px 40px;
  17. # 面试题：盒子和盒子之间margin取最大的值，它们是不叠加的。
  18.                     #d1 {
  19.             width: 100px;
  20.             height: 100px;
  21.             background: red;
  22.             margin-bottom: 20px;
  23.         }
  25.         #d2 {
  26.             width: 100px;
  27.             height: 100px;
  28.             background: green;
  29.             margin-top: 50px;
  30.         }
  32. # 在盒子水平居中
  33.          #d1 {
  34.             width: 200px;
  35.             height: 200px;
  36.             border: 3px solid red;
  38.         }
  40.         p {
  41.             width: 20px;
  42.             height: 20px;
  43.             background: green;
  44.             /*margin-left: 90px;*/
  45.             /*水平居中*/
  46.             margin: 0 auto; # 水平居中
  47.         }

浮动

  1. float（浮动）：
  2. 在 CSS 中，任何元素都可以浮动。
  3. 浮动元素会生成一个块级框，而不论它本身是何种元素。
  4. 关于浮动的两个特点：
  5.     1.浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
  6.     2.由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
  7. 三种取值：
  8.     1.left：向左浮动
  9.     2.right：向右浮动
  10.     3.none：默认值，不浮动
  11. clear属性规定元素的哪一侧不允许其他浮动元素：
  12.     1.left：在左侧不允许浮动元素。
  13.     2.right：在右侧不允许浮动元素。
  14.     3.both：在左右两侧均不允许浮动元素。
  15.     4.none：默认值。允许浮动元素出现在两侧。
  17.     5.inherit：规定应该从父元素继承 clear 属性的值。
  18.     <style>
  19.         #d1 {
  20.             width: 100px;
  21.             height: 100px;
  22.             background: green;
  23.             float: left; # 让背景颜色浮动
  24.         }
  26.          #d2 {
  27.             width: 110px;
  28.             height: 110px;
  29.             background: red;
  30.              /*float: left;*/
  31.         }
  32.     </style>

浮动带来的塌陷问题

  1.     <style>
  2.         #d1 {
  3.             border: 3px solid blue;
  4.         }
  6.         #d2 {
  7.             width: 100px;
  8.             height: 100px;
  9.             background: green;
  10.             float: left;
  11.         }
  13.         #d3 {
  14.             width: 100px;
  15.             height: 100px;
  16.             background: red;
  17.             float: left;
  18.         }
  19.         /*#d4 {*/
  20.         /*    !*height: 100px;*!*/
  21.         /*    !*清除浮动*!*/  # 不让左边出现浮动的盒子
  22.         /*    clear: left;*/
  23.         /*}*/
  25.         # 谁塌陷给给加clearfix:after（通用解决方式）
  26.         .clearfix:after { # 伪元素选择器
  27.             content: '';
  28.             display: block;  # 改为块级元素
  29.             clear: both;
  30.         }
  31.     </style>

overflow溢出属性

  1. 溢出属性：
  2.     1.visible:默认值。内容不会被修剪，会呈现在元素框之外。
  3.     2.hidden:内容会被修剪，并且其余内容是不可见的。
  4.     3.scroll:内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
  5.     4.auto:如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
  6.     5.inherit:规定应该从父元素继承 overflow 属性的值。
  7. 代码：文本溢出
  8. <head>
  9.     <meta charset="UTF-8">
  10.     <title>Title</title>
  11.     <style>
  12.         p {
  13.             width: 100px;
  14.             height: 100px;
  15.             border: 3px solid red;
  16.             /*overflow: hidden;*/  # 设置内容会被修剪
  17.             overflow: scroll;      # 设置滚动条属性
  18.         }
  19.     </style>
  20. </head>
  21. <body>
  22. <p>由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。</p>
  23. </body>

溢出的案例

  1. 圆形头像：
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <title>Title</title>
  5.     <style>
  6.         body {
  7.             background: #4e4e4e; # 设置背景颜色
  8.         }
  9.         #d1 {
  10.             width: 100px;
  11.             height: 100px;
  12.             border: 3px solid white; # 设置一个框
  13.             border-radius: 50%;
  14.             margin: 0 auto;
  15.             overflow: hidden;
  16.         }
  17.         #d1 img {
  18.             width: 100%;  # 设置图片的宽度100%
  19.         }
  20.     </style>
  21. </head>
  22. <body>
  23. <div id="d1">
  24.     <img src="1234.png" alt="">

定位

  1. 1.relative（相对定位）：relative的一个主要用法：方便绝对定位元素找到参照物。
  2. 2.absolute（绝对定位）：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。
  3. 3.fixed（固定）：fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。
  4.     <style>
  5.         #d1 {
  6.             width: 100px;
  7.             height: 100px;
  8.             background: red;
  9.             /*默认值，不能移动位置*/
  10.             /*position: static;*/
  12.             /*相对定位了， 只要改为relative， 那么就算你位置不发生移动，标签的性质也已经发生了改变
  13.                 有不能移动位置改为可以移动位置
  14.             */
  15.             position: relative; # 相对定位
  16.             left: 100px;
  17.             top: 100px;
  19.         #d2 {
  20.             width: 100px;
  21.             height: 100px;
  22.             background: red;
  23.             position: relative;
  24.             margin-left: 100px; # 绝对定位的父类
  25.         }
  27.         #d3 {
  28.             width: 100px;
  29.             height: 100px;
  30.             background: green;
  31.             position: absolute; # 绝对定位
  32.             left: 100px;
  33.             top: 100px;
  34.         }
  36.         #d4 {
  37.             width: 50px;
  38.             height: 200px;
  39.             background: red;
  40.             /*固定定位*/
  41.             position: fixed; # 固定定位
  42.             right: 20px;
  43.             bottom: 100px;
  44.         }
  45.     </style>

opacity

  1. opacity:用来定义透明效果。取值范围是0~1，0是完全透明，1是完全不透明。
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <title>Title</title>
  5.     <style>
  6.         p {
  7.             color: red;
  8.             opacity: 0.2; # 设置透明的效果
  9.         }
  10.     </style>
  11. </head>

day33 前端之css的更多相关文章

  1. 前端开发css实战：使用css制作网页中的多级菜单

    前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...

  2. 前端之css

    前端之css 本节内容 css概述及引入 css选择器 css常用属性 1.css概述及引入 CSS概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数 ...

  3. WEB前端开发CSS基础样式全面总结

    Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...

  4. 前端js,css文件合并三种方式,bat命令

    前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...

  5. 第二篇：web之前端之css

    前端之css   前端之css 本节内容 css概述及引入 css选择器 css常用属性 1.css概述及引入 CSS概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式 ...

  6. 好程序员web前端分享css常用属性缩写

    好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #0000 ...

  7. 前端基础——css

    前端基础——css css的内容主要包括:盒子模型.定位.单位与取值.属性.选择器.

  8. Python web前端 02 CSS

    Python web前端 02 CSS 一.选择器 1.CSS的几种样式(CSS用来修饰.美化网页的) #建立模板 复制内容--->SETTING---> Editor -----> ...

  9. Python web前端 03 CSS属性

    Python web前端 03 CSS属性 一.文字.文本属性 1.文字属性 font-family #字体类型浏览器默认的字体是微软雅黑,字体中有多个字体的时候,如果前面的字体没有就使用后面的字体 ...

随机推荐

  1. linux cut

    参考:Linux cut 命令详解_Linux_脚本之家 (jb51.net) 参考:cut命令_Linux cut 命令用法详解:连接文件并打印到标准输出设备上 (linuxde.net)

  2. 第K个数 牛客网 程序员面试金典 C++ Python

    第K个数 牛客网 程序员面试金典 C++ Python 题目描述 有一些数的素因子只有3.5.7,请设计一个算法,找出其中的第k个数. 给定一个数int k,请返回第k个数.保证k小于等于100. 测 ...

  3. 微信小程序API接口封装

    @ 目录 一,让我们看一下项目目录 二,让我们熟悉一下这三个文件目的(文件名你看着办) 三,页面js中如何使用 今天的API的封装,我们拿WX小程序开发中,对它的API (wx.request)对这个 ...

  4. iscsi基本命令

    磁阵操作命令 根据磁阵端配置的业务地址(targetIP)和端口(3260),命令iscsiadm -m discovery -t sendtargets -p targetIP:port(3260) ...

  5. Spring Boot 快速整合Swagger

    一.前言 Spring Boot作为当前最为流行的Java web开发脚手架,越来越多的开发者选择用其来构建企业级的RESTFul API接口.这些接口不但会服务于传统的web端(b/s),也会服务于 ...

  6. Robot Framework操作MySQL数据库

    1.安装databaselibrary.pymysql 通过cmd命令执行:pip install robotframework-databaselibrary cmd命令执行:pip install ...

  7. Java线程状态及同步锁

    线程的生命历程 线程的五大状态 创建状态:简而言之,当创建线程对象的代码出现的时候,此时线程就进入了创建状态.这时候的线程只是行代码而已.只有调用线程的start()方法时,线程的状态才会改变,进入就 ...

  8. 第一课 Dubbo背景及原理

    1 . 技术背景 Dubbo每天为2,000+个服务提供3,000,000,000+次访问量支持,并被广泛应用于阿里巴巴集团的各成员站点. Dubbo是一个阿里巴巴开源出来的一个分布式服务框架,致力于 ...

  9. 解决tomcat的404问题

    遇到的问题 点击startup.bat启动tomcat启动成功,但在网页上输入local:8080却显示Access Error: 404 -- Not Found Cannot locate doc ...

  10. Django笔记&教程 6-4 forms进阶操作，重写forms方法

    Django 自学笔记兼学习教程第6章第4节--forms进阶操作,重写forms方法 点击查看教程总目录 1 - 重写clean方法 在本章第三节中,我们举了个注册学生账号的例子,里面我们使用模型来 ...