1.css3基本使用,简单总结

前言

学习css笔记

推荐学习文章,网站:

1. 阮一峰老师的文章:   阮一峰的网络日志 ： 全部文章（按分类查看）
2. 十分详细且通俗易懂,,有图:CSS详细教程
3. css官网,十分详细,但有些难理解,可以现场测试使用:  CSS - 学习 Web 开发
4. 老牌前端学习网W3:  CSS 教程
5. 还有  csdn、博客园、稀土掘金等论坛资源

css三种导入方法

参考:HTML嵌入CSS样式（四种方法）

style 属性	直接写在标签里： <p style="background: chartreuse">澳大利亚</p>
style 标签导入	创建<style>标签,写在标签内 <style> p[id*="zhongguo"]{ background: aqua; } </style>
link 外部文件导入,参考:HTML5 之 Link 标签  (下面第四种导入方法已过时:) <style type="text/css">@import url("style.css");</style>	导入外部css文件,  导入后外部css的选择器和<style>标签的使用方法一致  rel:关联文件的类型 type:文件的读取方式 href:文件地址(涉及:相对路径,绝对路径,自行百度) <link rel="stylesheet" type="text/css" href="css/style.css">

 

css选择器

1.普通选择器

优先级：id>class>标签   *为匹配任意

支持一部分正则表达式

• • • 标签选择器

• • • class选择器

class选择器前面要加 . 后面跟class名称

• • • id选择器

class选择器前面要加 # 后面跟class名称

2.层次选择器

结合上图代码（此方法使用部分正则表达式）

标签 选中标签   （div p）	内部标签选择器  (div中所有p标签)
标签>选中标签 （div>p）	儿子类选择器  (div中所有子类的p标签，不包含孙子类以下)
标签+选中标签  （div+p）	相邻同层选择器，只选中一个，向下选择  (div相同层次的p标签)
标签~选中标签  （div~p）	相邻同级选择器，全部选中，向下选择   (div相同层次的p标签)

3.伪选择器

所有伪选择器请查看：CSS伪类选择器（非常详细）

使用方法示例：

4.属性选择器

• • 公式：（支持正则表达式）

    a[属性=属性名]{
    修改属性
    }

例如：

常用正则表达式：

=	绝对选择
*=	包含
^=	以什么开头
＄=	以什么结尾

css美化常用样式

样式大全参考:常用css样式大全以及css属性代码大全 (他的布局九绝,很绝)

哲心补充:

属性连写:

• • • font:  风格 粗细 大小/行高 "字体";

      font: italic 900 20px/1.8 楷体;

 

• • • background:颜色 图片地址 重复 是否固定 位置 / 尺寸

      background：#F00 url('img/images.png') no-repeat fixed center / cover;

 

• • • border: 粗线 实线 颜色;

       border: 9px dashed #990;

color写法补充:

ps:background:可以写渐变,也要写图片参考网站中有讲解

• • • #000000 :没两位为一个颜色值最大ff,十六进制 ,css中这样写不能设置透明度,在安卓开发中#99000000的前两位为透明度
    •  rgba(0,0,0,0.3):前三位最大255,为颜色值,最后一个最大值为1 ,表示透明度
    • #000:十六进制的简写,每一位为一个颜色值,最大f
    • red:单词表示法
    • 颜色工具网站:
      
      • Grabient颜色渐变 - 在线颜色工具
      • css渐变代码
      • 在线 生成CSS 渐变 代码

 

css盒子模型

盒子模型就是说, 每个控件都存在一个盒子中,盒子包含: 内边距(margin),盒子宽度(border),外部距(padding)

盒子的大小则是:margin+border+padding+内容大小

• 内外边距

设置前:

设置后:

1. 可以设置上下左右
2. 设置auto即可自动对齐,居中

• 阴影  和 圆角

CSS阴影效果（2种方法）

CSS圆角

这两篇文章都讲的很详细

ps:圆角,可以组合创造形状

 

浮动

• 什么是浮动:
  • 浮动就类似于写word文本时,插入一张图片后,你点击了字体环绕,效果差不多,用在布局里也非常好用
  • 浮动不看视频演示很难理解,这是我找到比感觉较好的浮动介绍视频HTML中的浮动是什么？出现塌陷怎么办?
  • 
  • 什么是浮动？浮动带来的影响？
• 改变浮动的方法:
  • display属性:

    block	将行内元素改为块元素
    inline	将行内元素改为块元素
    inline-block	将行列元素改为块元素，保留行内元素的特性

  • float浮动 和 clear去除浮动
    • 去除浮动可以将控件设置为一个盒子
    • float和clear是相对的,都包含左右上下的去除与浮动
  • 浮动缺陷解决 CSS清除浮动所有方法总结
    1. 扩大父元素高度 (灵活性很差)
    2. 建立空div清除浮动 (创建div多了不好)
    3. 用伪元素(推荐使用)  (使用伪类写一个隐藏的第二个方法,解决了写多个div产生问题的风险)

       • .父类盒子:after{
             content:"";  /*内容*/
             height:0;     /*盒子高度为0，看不见*/
             display:block;    /*插入伪元素是行内元素，要转化为块级元素*/ 
         }

    4. 自动溢出overflow   overflow的属性效果演示:overflow属性详解

 

定位

参考:CSS 定位详解

position 属性定义布局方式   元素的位置通过 "left", "top", "right", "bottom" 属性进行规定。

absolute	绝对定位，相对于 static 定位以外的第一个父元素进行定位。	脱离文档流
fixed	绝对定位，相对于浏览器窗口进行定位。	移出文档流
relative	相对定位，相对于其原本位置进行定位。	占原位置，在文档流中占位置。
sticky	粘性定位,相对定位和固定定位的混合，元素在跨越阈值前为相对定位,之后为固定定位；	在元素滚动到距离窗口 top小于10px之前,元素为相对定位,之后元素将固定在top为10px的位置,直到窗口滚回
static	默认值。没有定位
inherit	继承父元 position 属性的值。

原始:

相对定位relative

绝对定位absolute

布局：

grid布局

Flex 布局教程

更多定位待补充.......

Z-index

 

由于多个控件都定位到了同一个地方,就会出现遮挡的问题,

此时使用z-index为每个控件设置一个int值, 系统检测权重数字最大的排在最前面,以此类推

(最大好像是1000,自己百度)

 

更多内容待补充.......

修改日志:

2023-10-10  12:05:15

1.0.0

1. css三种导入方法
2. css选择器
3. css美化样式
4. 盒子模型
5. 浮动
6. 定位