CSS基础知识（2）

最新推荐文章于 2024-07-16 17:16:30 发布

Horice冻柠茶

最新推荐文章于 2024-07-16 17:16:30 发布

阅读量157

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/weixin_46764405/article/details/125039116

版权

基础知识

CSS也是一种标记语言2022/5/15
- 1.优点
  - 1.1美化网页，让html专注做结构。
  - 1.2CSS专注做样式，实现结构与样式分离。
- 2.语法
  - 2.1CSS的引入方式
    - 内部样式表
      - <head>
      - <style>
      - </style>
      - </head>
      - 真实开发中通常放在head标签里面，但理论上，可以放在html标签内的任何地方。
    - 行内样式表
      - 可对某个部分进行修改装饰
        例如：<p>hero</p>------><p style="color:red;font-size:12px">
    - 外部样式表
      - 这种引用方法的实践分两部分走
        新建一个一.css为后缀的文件
        在该文件中写入css标签
        在HTML中用<link rel="stylesheet" href="URL">进行引用，这样符合css文件中的对象将会被装饰。
        rel:当前文件与外部文件之间的关系
        stylesheet：关系名：样式表
        href：目标url
- 3.选择器
  - 3.1作用：用来选择标签
  - 3.2分类
    - 3.2.1基础选择器
      - <style>
      - p{font-size:16px;
      - }
      - </style>
    - 3.2.2复合选择器
    - 3.2.3类选择器（使用的最多）
      - 先给对象标上<p class=“name”></p>
      - 重点：可对多个对象标注同一个name类
        <style>
        .name{font-size:16px;
        }
        </style>
      - 类名的命名规范：
        header头
        content内容
        fonter尾
        nav导航栏
        sidebar侧栏
        column栏目
        loginbar登录条
        banner广告
        logo标志
        hot热点
        subnav子导航
    - ID选择器
      - 先给对象标上<p id=“duck”></p>
      - 重点：一个id只能给一个对象
      - <style>
      - #duck{font-size:16px;
      - }
      - </style>
    - 通配符选择器
      - 通配的意思是将页面中所有的标签选出来进行统一配置
      - <style>
      - *{font-size:16px;
      - }
      - </style>
  - 3.3字体属性
    - 字体 font-family
      - font-family：‘隶书’;（建议用英文以适应兼容性）
      - font-family：‘隶书’，Times,serif;
        浏览器会自动从左到右进行检索，有哪个用哪个。
    - 大小 font-size
      - font-size：16px；
        标题需要单独指出
    - 粗细 font-weight
      - font-weight=400px；
        100-900：其中400=normal不加粗，700=bold加粗。
    - 文字样式 font-style
      - font-style:italic 倾斜
      - font-weight:700 加粗
      - font-size:16px
      - font-family:‘微软雅黑’
    - 复合写法：
      - font:italic 700 16px 'Microsoft yahei'
      - 重点：1.顺序不能颠倒 2.除了字号和字样一定要有，其他可以默认。
  - 3.4文本属性
    - 文本颜色的表示方法 color:____
      - 直接写名字：red/blue/yellow
      - 十六进制：#FF0000（目前用的最多）
      - RGB代码：rgb(255,0,0)
    - 文本对齐 text-align：center/left/right
      - 重点：表格和列表并不会完全对齐
        因此对齐表格可用：
        table{
        margin:auto
        }
        对齐列表可用：
        li{
        width:100px;
        margin:auto;
        }
    - 文本装饰 text-decoration
      - 取消下划线
        text-decoration:none
      - 设置下划线
        text-decoration:underline
      - 设置上划线
        text-decoration:overline
      - 设置删除线
        text-decoration:line-through
    - 文本缩进 text-indent:20px;
      - text-indent:.2em
        em:代表两个当前文字的大小
      - text-indent:-2em
    - 行间距 line-height:26px
      - 测量工具：FSCapture.exe
- 4.Chrome调试工具
  - 4.1在页面中按F12打开调试工具

- 5.Emmet语法

- - 5.1标签
    - 生成标签：
      - 标签名+Tab键
        例如：div+Tab=<div></div>
    - 快捷生成n个标签
      - 标签名*n

- - - 快捷生成包含标签：输入ul>il 按Tab

- - - 快捷生成并列标签：输入div+p 按Tab

- - - 快捷向标签里面添加类：输入标签名.类名按Tab
      - .one

- - - - #id

- - - - span.one

- - - - div.one

- - - - div.demo$*5

- - - - div{勇于面对人生}*5

- - - - div{$}*5

- - 5.2快速格式化代码
    - 在webstorm中点击文件-->设置勾选保存时格式化代码，随后每次保存时都会自动进行代码格式化
    - 保存快捷键：ctrl+s
- 6.CSS复合选择器

- - 6.1后代选择器（重要）

- - - 为重复标签添加类名，之后引用：.类名空格子级标签

- - 6.2子选择器（亲儿子选择器）
    - 应用场景：只想对一级标签进行样式修改

- - - 使用方法：.类名>子标签名

- - 6.3并集选择器（重要）

- - - 使用场景：对多组标签进行集体声明
    - 使用方法
      - 标签1，标签2，标签3{样式说明}

- - 6.4链接伪类选择器

- - - 应用场景：对链接进行样式修改
    - 使用方法

- - - 注意：
      - 顺序必须严格按照：link未选择过的，visited选择过的,hover鼠标放上去显示，active鼠标点击未释放，否则无效果。
      - 链接的样式必须单独指定
      - 实际开发中我们也不用一定要按顺序进行样式设定，通常设置如下，只需要考虑不点击和鼠标经过的两种情况。

- - 6.5：focus选择器

- - 应用场景：针对我选中的文本框进行样式修改
- 7.元素显示模式
  - 分类：块元素&行内元素
    - 块元素

- - - - 注意

- - - 行内元素

- - - - 注意

- - - 行内块元素

- - 元素显示模式的转换
    - 转换成块元素：display：block；
    - 转换成行内元素：display：inline；
    - 转换成行内块元素：display：inline-block；
    - 使用方法

- - 截图工具snipaste

- - - 安装及下载：
      - 到官网下载Snipaste - 截图 + 贴图
      - 直接解压，运行snipaste.exe文件
      - 无需安装，直接使用。
- 8.简介版小米侧栏案例

- 9.背景
  - 9.1背景颜色
    - background-color：red；
  - 9.2背景图片
    - background-image:url("images/logo.png");
  - 9.3背景平铺

- - - background-repeat:repeat/no-repeat/repeat-x/repeat-y
  - 9.4背景图片位置
    - background-position:x,y; 改变背景中图片的位置

- - 9.5背景图像固定
    - background-attachment:scroll/fixed
      - scroll:图片随对象内容滚动(默认)
      - fixed:背景图片固定
  - 9.10背景颜色半透明
    - background:rgba(0,0,0,0.5)
    - 从左到右分别是黑色，黑色，黑色，透明度0.5（0~1）
    - 注意：是让背景颜色半透明，不是盒子内容半透明。
- 10.CSS三大特性
  - 10.1层叠性
    - 样式冲突，采取就近原则，哪个样式利结构近，就执行哪个样式
    - 样式不冲突，不会层叠.
  - 10.2继承性
    - 子标签会继承父标签的某些样式，因此CSS可以直接对父标签进行样式设置，子标签将会继承。
    - 行高的继承：

- - 10.3优先级
    - 当选择器类型一样时，按层叠性。
    - 当选择器类型不一样时，按照权重进行选择

- - - - important>行内样式>ID选择器>类选择器/伪类选择器>元素选择器>继承或者*
- 11.盒子
  - 盒子四要素：border/content/margin(盒子与盒子之间的距离)/padding（内边距）
    - border
      - border-weight边框粗细
      - border-color边框颜色
      - border-style:solid(实线)/dashed(虚线)/dotted(点线)
      - 复合写法：border:14px red solid;（没有顺序）
        border-top 单独定义上边框
        border-bottom 单独定义下边框
        border-left 左边
        border-right 右边
      - border-collapse:collapse 合并
    - padding(内容和边框之间的距离)
      - padding-top/bottom/left/right:10px;
      - 复合写法：
        padding:5px   上下左右都是5像素
        padding:5px 10px   上下左右
        padding:5px 10px 8px   上左右下
        padding:5px 10px 8px 9px 上右下左
      - padding会影响盒子的大小，会撑大盒子（边框也是）
    - margin外边距典型运用

- 12.position属性
  - 1.static默认位置。一般来说,我们不需要特别声明它,但有时当我们遇到继承时,我们不愿意看到元素继承的属性影响本身,所以我们可以使用Position:static取消继承,即恢复元素定位的默认值。
  - 2.relative相对定位。相对定位是相对于元素默认位置的定位。它偏移的top,right,bottom,left的值都是基于它原来的位置,不管其他元素会怎么样。请注意,relative移动后的元素来的位置仍然占据空间。
  - 3.absolute绝对定位。设定为absolute元素,如果其父容器设定为position属性,并且position属性值为absolute或relative,则根据父容器进行偏移。若父容器未设定position属性.
  - 4.fixed固定定位。位置设置为fixed元素,可以定位为与浏览器窗口相比的指定坐标。无论窗口是否滚动,元素都会留在那个位置。它总是基于body。注意设置fixed属性的元素在标准流中不占位置。
- 13.工具技巧
  - 多行鼠标插入 shift+alt
- 14.圆角边框原理
  - border -radius:length(角圆的半径长度，半径越大，弧线越强烈)
  - 应用：盒子链接和盒子按钮
    - <input name="登陆" type="button" value="login">

- 15.盒子阴影
  - box-shadow：10px 10px 10px 10px black
    - h-shadow 水平位置，允许负值
    - v-shadow 竖直位置，允许负值
    - blur 模糊距离
    - spread 阴影的尺寸
    - color 阴影的颜色
    - inset 将外部阴影改成内部阴影
- 16.文字阴影
  - text-shadow
    - h-shadow 水平位置，允许负值
    - v-shadow 竖直位置，允许负值
    - blur 模糊距离
    - color 阴影的颜色
浮动
- 1.需要浮动的原因：
  - 有很多的页面布局效果，标准流没有办法完成，此时就可以利用浮动完成布局，因为浮动可以改变元素标签默认的排序方式。
- 2.浮动的经典应用：让多个块元素一行内排列显示
  - 小结：网页布局中，多个块级元素纵向布局找标准流，横向排列找浮动。
- 3.语法：选择器{ float：属性值；}
  - 属性值：none(默认值)/left/right
- 4.浮动特性

Horice冻柠茶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础知识（2）

基础知识CSS也是一种标记语言2022/5/15 1.优点 1.1美化网页，让html专注做结构。 1.2CSS专注做样式，实现结构与样式分离。 2.语法 2.1CSS的引入方式内部样式表 <head> <style> </style> </head> 真实开发中通常放在head标签里面，但理论上，可以放在html标签内的任何地方。 ...
复制链接

扫一扫