前端学习:css基本知识(1)

简介: 前端学习:css基本知识(1)

css 层叠样式表

作用:
    - 颜色
    - 位置
注释 /*  这是注释  */
形式
    - 内嵌样式 标签style
    - 内联样式 head style
    - 外联样式 单独文件
选择器
    - id选择器 #
    - class选择器 .
    - 标签选择器
    - 层级选择器 空格隔开父-子
    - 组合选择器 逗号隔开同级元素
    - 属性选择器 [] 里边写属性=值
优先级:
    style由上至下
边框 border  宽度 样式 颜色
height高度  width宽度  像素,百分比
text-align:center水平位置,
line-height行高 垂直方向居中
color字体颜色
font-size字体大小
font-weight字体加粗
float  标签漂浮,块级标签堆叠
        老子管不住:clear:both
display
    - inline 行内显示 无法设置高度,宽度,边距
    - block 块级显示 可以设置高度,宽度,边距
    - none 不显示
    - inline-block 双重属性
padding  内边距
margin  外边距
代码重用
    两个样式相同的部分可以单独提出来
自适应media
布局变形解决办法:最外层用绝对宽度,内部可以使用百分比
img标签,默认有1像素的边框,border:0;
position
    - fixed 固定
    - relative+absolute 相对定位+绝对定位
z-index: 层级顺序,立体堆叠,值越大越靠前
opacity:模糊度0-1
overflow:auto  hidden
hover
background-image: url("img/icon.png"); 默认重复
background-repeat: no-repeat;
background-position-x:0; 相当于扣了一个小洞
background-position-y:0;

代码实例

float
   Title
   </div><div>        .pg-head{</div><div>            height: 38px;</div><div>            background-color: darkgray;</div><div>        }</div><div>        .pg-head-left{</div><div>            float: left;</div><div>        }</div><div>        .pg-head-right{</div><div>            float: right;</div><div>        }</div><div>        .pg-body{</div><div>            width: 900px;</div><div>            height:400px;</div><div>            border: 1px solid red;</div><div><br /></div><div>        }</div><div>        .pg-element{</div><div>            width: 150px;</div><div>            height:200px;</div><div>            border: 1px solid green;</div><div>            float: left;</div><div>        }</div><div>    
左边的内容
右边的内容
内部元素
内部元素
内部元素
内部元素
内部元素
内部元素

效果

image.png


fixed

 

 

Title
   </div><div>        body{</div><div>            margin: 0 auto;</div><div>        }</div><div>        .pg-head{</div><div>            background-color: black;</div><div>            color:white;</div><div>            position: fixed;</div><div>            width: 100%;</div><div>            height: 48px;</div><div>            top:0;</div><div>            text-align: center;</div><div>            line-height: 48px;</div><div>        }</div><div>        .pg-body{</div><div>            height: 5000px;</div><div>            background-color: #dddddd;</div><div>            margin-top: 48px;</div><div>            color:green;</div><div>            text-align: center;</div><div>            font-size:50px;</div><div>        }</div><div>        #pg-goto-top{</div><div>            width: 80px;</div><div>            height: 50px;</div><div>            background-color: black;</div><div>            position: fixed;</div><div>            right: 10px;</div><div>            bottom:10px;</div><div>            color:white;</div><div>            text-align: center;</div><div>            line-height: 50px;</div><div>        }</div><div>    
顶部内容
主体内容
返回顶部
   </div><div>        function gotoTop() {</div><div>            document.body.scrollTop=0;</div><div>        }</div><div>

image.png

background

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .icon{
            width: 18px;
            height: 18px;
            background-image: url("img/icon.png");
            background-repeat: no-repeat;
            background-position-x:0;
            /*border: 1px solid green;*/
            float: left;
            margin-right:10px ;
        }
        .icon-1{background-position-y:0;}
        .icon-2{background-position-y:-20px;}
        .icon-3{background-position-y:-40px;}
        .icon-4{background-position-y:-60px;}
        .icon-5{background-position-y:-100px;}
        .icon-6{background-position-y:-120px;}
        .icon-7{background-position-y:-140px;}
        .icon-8{background-position-y:-160px;}
        .icon-9{background-position-y:-180px;}
    </style>
</head>
<body>
<p>原图:</p>
<div>
    <img src="img/icon.png" alt="">
</div>
<p>背景图:</p>
<div class="icon icon-1"></div>
<div class="icon icon-2"></div>
<div class="icon icon-3"></div>
<div class="icon icon-4"></div>
<div class="icon icon-5"></div>
<div class="icon icon-6"></div>
<div class="icon icon-7"></div>
<div class="icon icon-8"></div>
<div class="icon icon-9"></div>
</body>
</html>

icon.png

image.png


效果

image.png

相关文章
|
5天前
|
JavaScript 前端开发 NoSQL
前端node如何学习进阶知识
【7月更文挑战第8天】 深化JavaScript基础,精通Node.js核心模块(如fs、http)与事件循环机制,学习Express框架及异步编程(回调、Promise、async/await),掌握数据库交互,参与实战项目,关注Node.js最新技术和最佳实践,以此提升进阶技能。
21 8
|
9天前
|
前端开发 JavaScript 开发工具
给前端小白的学习建议
【7月更文挑战第4天】 **前端新手入门指南:** - 明确目标,从HTML/CSS基础开始。 - 深入学习JavaScript,结合项目实战。 - 跟踪技术趋势,选一二框架钻研。 - 多实践,从小项目到复杂应用。 - 掌握开发工具与调试技巧。 - 培养解决问题的能力,保持好奇与耐心。 - 加入社区,分享交流,持之以恒,成为优秀前端开发者。
13 2
|
10天前
|
前端开发 安全 JavaScript
学习前端加密
【7月更文挑战第3天】前端加密保护数据安全,防止传输中被截获,提升用户体验。HTTPS基础保障,JavaScript库如CryptoJS辅助加密,Web Crypto API提供原生加密功能。但前端加密非万能,需结合后端措施,注意算法选择、密钥管理。
12 2
|
12天前
|
前端开发 JavaScript UED
只会用插件可不行,这些前端动画技术同样值得收藏-CSS篇
只会用插件可不行,这些前端动画技术同样值得收藏-CSS篇
15 0
|
12天前
|
前端开发 JavaScript 编译器
如何在CSS中写变量?一文带你了解前端样式利器
如何在CSS中写变量?一文带你了解前端样式利器
18 0
|
12天前
|
前端开发
前端 CSS 经典:模拟 material 文本框
前端 CSS 经典:模拟 material 文本框
10 0
|
12天前
|
前端开发
前端 CSS 经典:图层放大的 hover 效果
前端 CSS 经典:图层放大的 hover 效果
11 0
|
12天前
|
前端开发
前端 CSS 经典:保持元素宽高比
前端 CSS 经典:保持元素宽高比
12 0
|
12天前
|
前端开发
前端 CSS 经典:鼠标位置信息
前端 CSS 经典:鼠标位置信息
9 0
|
12天前
|
前端开发 JavaScript
前端 CSS 经典:文字描边
前端 CSS 经典:文字描边
7 0