前端day1—CSS

时间 2019-11-10
标签前端 day1 day css 栏目 CSS 繁體版
原文原文链接
class能够重复一对html标签中的id属性是惟一的，不能够重复class选择器优先级高于标签选择器优先级：id>class>标签display:none    隐藏属性--------------------------------------------------------------------------------css 选择器 <!--样式标签--><style>如下例子都是在head里的<style></style>内填写--------------------------------------------------------------------------------id选择器例子，#代指idhead里写#div1{    }/*div1与下方id里的名称对应*/大括号里写完一条后有分号， background-color: red;body里写<div id="div1">我是我的</div>--------------------------------------------------------------------------------class选择器英文字符的点代指.c1{    background-color: black;}<div class="c1">11</div>--------------------------------------------------------------------------------标签选择器div{    }由于没有定义是哪一个标签，因此全部div标签都应用这个css样式<div>jnz</div><div>jnz</div><div>jnz</div><div>jnz</div><div>jnz</div><div>jnz</div>--------------------------------------------------------------------------------css style: 里面的写的就叫作css 每个样式的间隔用； 所有相同的时候引用classstyle="height: 48px;background-color: #6699CC"--------------------------------------------------------------------------------标签层级选择器，按照层级顺序查找，经过空格分隔div span{    background-color: red;}<div>    <span>123</span></div>--------------------------------------------------------------------------------id组合选择器，经过逗号分隔#i1,#i2{    }id组合选择器 id属性在一个html标签中不容许出现两个相同的<div id="i1">123</div><div id="i2">123</div>--------------------------------------------------------------------------------通常前端都是经过class来定义css样式，通常不会用id或者标签class组合选择器.c1,.c2{    }class组合器 class在一个html中能够同时出现多个<div class="c1">123</div><div class="c2">123</div>也能够以下写法，div里同时引用两个class样式.c1{    }.c2{   width: 100px;    height: 100px;}<div class="c1 c2">123</div><div class="c1 c2">123</div>也能够以下写法，两个div都是c1，head里只写一个就能够了.c1{    }<div class="c1">123</div><div class="c1">123</div>--------------------------------------------------------------------------------属性选择器，自定义一个属性，而后用中括号查找div[jnz="金牛座"]{    }<div jnz="金牛座">32</div>--------------------------------------------------------------------------------CSS优先级标签中style优先级最高，其次在代码中就近找，也就是从下往上找<!--head中style标签是第一处写css样式的地方--><style>    .c1{            }</style><!--第二种经过属性的方式对标签增长css样式--><div class="c1" style="1</div><!--第三种引入css样式表-->，在样式表中的写法和在style中同样，就新建一个s.css，写  .c1{        background-color: red;    }而后heaad里写，而不是在标签style里写<link rel="stylesheet" href="s.css"><!--优先级--><!--按照里body里所要引用class的标签开始，由内而外 由近到远--> <style>        #i1 {                    }    </style></head><body><div id='i1' class="c1">1</div></body>若是同一标签中含有id和class，以谁最能精准定位以谁优先级最高。id>class>标签--------------------------------------------------------------------------------.c1{    /*宽度*/    width: 100px;    /*高度*/    height: 100px;    /*背景色*/    }.c1{    width: 100px;    height: 100px;    /*外边框 1像素 红色 实线*/    border: 1px red solid;    /*水平居中*/    text-align: center;    /*垂直居中*/写设定的高度就好，会自动居中    line-height: 100px;}.f1{    width: 100px;    height: 48px;        float: left;   使下面三个块级标签向左成一行对齐，而不是每个块级一行}<div class="c1"></div>font-size font-weightfont-size:字体大小 px font-weight:字体加粗font-weight:字体加粗 bold:粗体 700 bolder:更粗字体 lighter:更细字体 normal:默认值 400 inherit:从父类继承字体粗细font-size 字体大小 font-weight 字体粗细 若是一个标签中含有多个样式，用分号隔开<div style="font-size: xx-large;font-weight: bolder">金牛座</div><div class="c1">1</div>浮动<div class="f1"></div><div class="f1" style="</div><div class="f1" style="float: right"></div>宽度可使用百分比的方式 高度 不能够 写百分比<div style="width: 30%;height: 48px;</div><!--display 可让标签在行内 和 块级之间 自由转换块转行内display: inline;行内转块display: block;既是块 又是 行内display:inline-block;--><div style="display: inline;">金牛座</div><span style="display: block;">金牛座</span><span style="display:inline-block;width: 100px;height: 100px;"></span>行内标签不能够应用 宽、高 外边距 内边距的样式，以下这行代码没有做用<span style="width: 100px;height: 100px">123</span>display:none为隐藏属性，有了它就不显示后面的样式<div style="display:none;border:1px red solid;width:100px;height: 100px;"></div>好比下面这行属性，常常会加上display:none，遮住原生样式，而后再罩上一层div显示漂亮的样式<input type="file"><!--外边距不改变自身，针对外侧进行像素移动，自己大小不变--><div style="width: 100%;height: 100px;border: 1px red solid">    <div style="margin-top:1px;width: 100%;height: 48px;</div></div><!--内边距<!--改变自身，自身大小会随之变化-->--><div style="width: 100%;height: 100px;border: 1px red solid">    <div style="padding-top:1px;width: 100%;height: 48px;</div></div>分层.html<input type="button" value="登陆" style="cursor: pointer">    就是鼠标移动按钮上呈小手状<!--overflow滚动条overflow: hidden 当图片或内容大于外层div时，自动 截取左上角图片overflow: auto 当内容或图片小于外层div则自动隐藏滚动条overflow: scroll 不管大小 都在增长滚动条--><div style="overflow: scroll;border: 1px black solid;width: 200px;height: 200px">    <img src="http://ui.imdsx.cn/static/image/dsx_Small.jpg"></div>backgroundbackground 是针对背景一些样式设置， background-image：背景图片，图片大小若是小于div的大小。则无限堆叠 水平垂直都堆叠。可经过background-repeat属性对是否堆叠进行设置 no-repeat(不堆叠) repeat-y(纵向堆叠) repeat-x(横向堆叠)。 background-position 针对div设置图片展现的位置。background-position-y: 10px 纵向移动图片 background-position-x: 10px 横向移动图片。也能够不写x或y，默认第一个为x的值 第二个位y的值，background-position:10px 10px。能够经过background直接简写，background 简写 参数分别为 颜色 背景图 postion横向 纵向 是否堆叠<div style="background-image: url('http://ui.imdsx.cn/static/image/dsx_Small.jpg');background-repeat:repeat-y;width: 200px;height: 200px;border: 1px black solid"></div><div style="background-position: 1px 1px;background-repeat: no-repeat;background-image: url('http://ui.imdsx.cn/static/image/icon.png');width: 20px;height: 20px;border: 1px black solid;"></div>--------------------------------------------------------------------------------分层：<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .c1{            height: 48px;                        position: fixed;   有了这行width: 100%就不须要了，就能够删了            top:0;  下面这三个就是配合position这个属性使用的，这个div就会固定在顶部，滚动页面也冻结显示            left: 0;            right: 0;        }    </style></head><!--postion 分层 fixed 绝对定位--><body style="margin: 0">  0的话就不用加px了，这样整个样式都会贴合，没有默认的8px的边距    <div class="c1"></div>    <div style="height: 48px;width: 48px;position: fixed;right: 0;bottom: 0;"></div>  这行是右下角加个固定的    <div style="margin-top:48px;height: 1000px;width: 100%;border: 1px red solid;        金牛座 真厉害    </div>  加了margin-top:48px  ，金牛座 真厉害  这行就能显示出来了，就不会被上行冻结的那行挡住了    postion 相对定位    <div style="position: relative;width:500px;height:500px;border:1px black solid;">        <div style="position: absolute;width: 100px;height: 100px;</div>        <div style="left: 0;bottom:0;position: absolute;width: 100px;height: 100px;background-color: black"></div>左下角        <div style="right: 0;top:0;position: absolute;width: 100px;height: 100px;</div>右上角        <div style="right: 0;bottom:0;position: absolute;width: 100px;height: 100px;background-color: pink"></div>  此行是相对于外边框，固定到右下角    </div>    z-index 谁的值大，谁的层级优先级显示的就高，就优先显示。最大值为999    <div style="position: relative;width: 200px;height: 200px;border: 1px red solid">        <div style="z-index: 10;position: absolute;width: 200px;height: 200px;</div>        <div style="z-index: 9;position: absolute;width: 200px;height: 200px;background-color: blue"></div>    </div></body></html>
1. 前端之路 day1 html和css
2. web前端day1
3. 前端学习day1
4. Day1 了解web前端
5. 前端学习--Vue.js Day1
6. 前端工做日记day1
7. css day2 js 前端编程语言 day1 # 47
8. 前端之CSS
9. Web前端-CSS
10. 前端css position
更多相关文章...
• jQuery Mobile CSS 类 - jQuery Mobile 教程
• CSS 指南 - 网站建设指南
• 使用阿里云OSS+CDN部署前端页面与加速静态资源
• Docker容器实战(一) - 封神Server端技术