css基础学习

最新推荐文章于 2024-10-18 11:33:00 发布

逆风奔袭

最新推荐文章于 2024-10-18 11:33:00 发布

阅读量192

点赞数

分类专栏： css 学习笔记文章标签： css 学习笔记

本文链接：https://blog.csdn.net/weixin_42793833/article/details/81208891

版权

学习笔记同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

css

2 篇文章 0 订阅

订阅专栏

CSS基础

css文件存放位置
1. 内嵌样式：
  1. <head>
    
    <style type="text/CSS">
    
    选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
    
    </style>
    
    </head>
2. 内联样式
  1. <标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
3. 外部样式
  1. <head>
    
    <link href="CSS文件的路径" rel="stylesheet" />
    
    </head>
选择器
1. 标签选择器 div、a...
2. 类选择器 .lxzq{}
3. 多类名选择器 <div class=”pink fontWeight font20”>亚瑟</div>(类名的顺序是style标签中下面覆盖上面的)
4. id选择器 #idName{}
5. 通配符选择器 *{所有的标签都用到此样式}
6. h1.class{}交集选择器,标签和标签中的类型共同决定
7. .one,h1{}并集选择器用逗号隔开
8. .one h1{} 后台选择器，用空格隔开
9. .one > h3{} 亲儿子选择器，>两边要有空格。
10. 伪选择器 :link{}未访问、:visited{}以访问、hover{}鼠标移动到连接上、:active{}选定的连接
字体样式属性
1. font-size 单位px（使用偶数，技术ie有bug，14或者16）
2. font-family 字体 p{font-family:”微软雅黑”}(字体可以放多个用逗号隔开)
3. font-weight 字体粗细正常为400，粗体为700 使用数字解析效率更高
4. font-style 正常normal,倾斜italic
5. 综合使用选择器{font: font-style font-weight font-size/line-height font-family;}
css外观颜色 color:red 最受欢迎的是16进制。ff表示最大，00表示最小相同可以写一个，分别表示红黄绿。
行间距 line-height(一般情况行间距比字体大7~8像素,利用此属性进行行内垂直居中)
文本格式
1. text-align文本对齐方式 left、right、center(改变合子中的数据的对齐方式)
2. text-indent首行缩进，单位是em，1em是一个汉子的宽度
text-decoration 文本装饰 none 无、underline下划线、overline上划线、line-through贯穿先
display标签显示模式
1. block-level块级标签，独占一行或者多行可以设置高度宽度对齐方式长用户布局<h1~h6> <p> <div> <ul> <ol> <li>
2. inline-level 行内标签,不占独立的区域仅仅靠自身大小来支撑不可以设置高度宽度和对齐方式。<a> <strong> <b> <em> <i> <del> <span>。水平放下该padding和margin可以设置。
3. inline-block行内块元素<image> <input><td>可以设置高度、宽度和对齐方式。
4. display:inline 块转行
5. display:block 行砖块
6. display:inline-block 块、行内元素转换为内快
7. css三大特性层叠、继承、优先级
  1. 层叠：相同的选择器，里面出现不同的属性，则就近选择。
  2. 继承：子标签继承父标签的一些样式如文本颜色和字号。继承的权重为0。
  3. 优先级：两个或者更多规则应用在同一元素上。
    
    继承或者*的贡献值为0.0.0.0，元素标签的贡献值是0.0.0.1，类和伪装的贡献值是0.0.1.0，每个ID贡献值是0.1.0.0，行内样式是1.0.0.0，每个!important贡献值无穷大
css背景
1. background-color 背景颜色
2. background-image 背景图片地址url(),提倡url()不加引号
3. background-repeat 是否平铺 repeat、no-repeat、repeat-x、repeat-y
4. background-position 背景位置 length、position：top、center、bottom、left、right
5. background-attachment 北京图片是固定还是滚动 scroll、fixed
6. background:背景颜色背景图片地址背景平铺背景滚动背景位置
7. 背景透明度 background:rgba(0,0,0,0.3);
盒子模型
1. border盒子边框：broder-width、border-style、border-color。其中边框分为上下左右四个线，每一个线的样式都可以是不相同的宽度、类型以及颜色。border-方向-(width、style、color) 方向为顺时针。
2. 表格细线边框table{border-collapse:collapse;}
3. 内边距：padding-top、padding-right、padding-bottom、padding-left。一个值山下左右，两个值是上下、左右。三个值是上、左右、下。四个值一样一个。
4. 外边距：margin-top、margin-right、margin-bottom、margin-left。盒子必须有宽度，块级元素水平居中{widht:960px;margin:0px auto;}
清除默认的边距
1. *{ padding:0;margin:0;}
圆角（划圆）
1. border-radius：左上、右上、右下、左下。
盒子阴影box-shadow:水平、垂直、模糊距离、模糊尺寸、阴影颜色、内外阴影
1. box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4);
浮动 float ，left、right、none
清除浮动
1. 使用clear属性，选择器{clear:both}在使用浮动标签的后面添加<div style=”clear:both” ></div>
2. 给父级标签添加overflow属性 overflow:hidden 缺点：内容增多时不会自动换行
3. 使用after伪元素清除浮动
  
  .clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; }
  
  .clearfix {*zoom: 1;} /* IE6、7 专有 */
4. 使用before和after双伪元素清除浮动
  1. .clearfix:before,.clearfix:after {
  2. content:"";
  3. display:table; /* 这句话可以出发BFC BFC可以清除浮动,BFC我们后面讲 */}
  4. .clearfix:after {
  5. clear:both;}
  6. .clearfix {*zoom:1;}
position定位（添加定位后转换为行内块模式）
1. 元素定位属性：top、bottom、left、right只能同时出现两个。上下、左右。
2. 子绝父相：两个标签同时存在定位。
3. 绝对定位的盒子实现居中：left:50% margin-left:自身宽度的一般
4. 定位常用属性 static、relative、absolute、fixed
  - Position：static 取消定位
  - Relative：相对于自己左上角进行偏移，位置（图片大小）保留。
  - Absolute：（完全脱流，不保留位置）根据父标签的左上角进行定位。如果所有的父标签都没有定位则根据屏幕进行定位。
  - Fixed：固定定位全部脱流，他的位置设置只针对当前浏览器设置。
  - Z-index:叠放次序 z-index:2 值大的在上面。
元素的显示和隐藏display visiblity overflow
1. Display:none隐藏对象，display:block 除了有转换为块元素外还有显示的意思。隐藏之后不再保留位置。
2. Visibility:visible 对象可视 visibility:hidden 隐藏。隐藏之后继续保留位置。
3. Overflow 溢出 visible不剪切内容也不添加滚动条。Auto超出自动添加滚动条。Hidden：不显示超过对象尺寸内容，超出的部门隐藏掉。
Sroll：不管是否超出内容，总是显示滚动条。
css用户界面样式
1. 鼠标样式cursor
  - Default
  - Pointer小手
  - Move移动
  - Text文本
outline轮廓,绘制元素周围的一条线。
1. Outline；color||style||width，常用语去掉边框outline: 0;
防止文本域textarea进行拖拽，<textarea style=”resize:none”></textarea>
Vertical-align垂直对齐 vertical-align：baseline|top|middle|bottom
1. 去掉图片（行内块元素）底层的空白缝隙
  - Image {vertical-align:top;border:0}
  - Image{display:block;border:0}
White-space隐藏溢出文字
1. Normal默认处理方式，nowrap强制在一行显示
2. ```
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
```
text-overflow文字溢出
1. Clip：不限制省略标志。
2. Ellipsis：限制省略标志
Css精灵技术。
1. 将多个小图片放到一个大图片上，减少访问服务器次数。利用background：url（），no-reap x y
滑动门（做当行栏，标题字数不同）
1. 经典布局
2. <li>
3. <a href=”#” >（设置背景左侧，padding撑开合适内容）
4. <span>内容</span>（设置内径右侧，padding撑开合适宽度）
5. </a>
6. </li>
字体图标（svg）
1. 字体图标相关网站： http://icomoon.io 、 http://www.iconfont.cn/
2. 生成字体图标步骤
  1. 获取svg格式图片
  2. 上传到网站
  3. 下载
3. 使用字体图标
  1. 将下载的文件中fonts文件夹放到项目中相应位置
  2. 引入样式
    1. @font-face {
      font-family: 'icomoon';
      src: url('fonts/icomoon.eot?7kkyc2');
      src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
      url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
      url('fonts/icomoon.woff?7kkyc2') format('woff'),
      url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
      font-weight: normal;
      font-style: normal;
      }
  3. 设置字体
    1. span {
      font-family: "icomoon";
      }
  4. 代码中添加字体样式。（下载的文件中找到网页打开）
    1. span::before {
      content: "\e900";
      }
      或者
      <span></span>