css_new

最新推荐文章于 2022-03-19 20:54:35 发布

dcw93178

最新推荐文章于 2022-03-19 20:54:35 发布

阅读量79

点赞数

原文链接：http://www.cnblogs.com/lazyball/p/7635307.html

版权

css属性选择器

class标签选择器
    .名称 {
        ...
    }
    <标签 class='名称'></标签>

　　在head里引入
　　<head>
    　　<link rel="stylesheet" href="style.css" /> 　　</head>

id选择器
    #名称 {
        ...
    }
    <标签 id='名称'></标签>
标签选择器
    标签 {
        ...
    }
    
层级选择器 空格隔开
    .c1 div {
        ...
    }
组合选择器  逗号隔开
    .i1,.i2,.i3 {
        ...
    }
属性选择器
        对选择到的标签通过属性再筛选一次
        .c1[n='alex']{width:100px;height:200px;}

css优先级

标签里的style优先，
#id 
.class 
标签
有!important声明的规则高于一切

css样式

@charset "utf-8";
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, button, input, textarea, th, td {
    margin: 0;
    padding: 0
}

body {
    font-size: 12px;
    font-style: normal;
    font-family: "宋体", Helvetica, sans-serif
}

small {
    font-size: 12px
}

h1 {
    font-size: 18px
}

h2 {
    font-size: 16px
}

h3 {
    font-size: 14px
}

h4, h5, h6 {
    font-size: 100%
}

ul, ol {
    list-style: none
}

a {
    text-decoration: none;
    background-color: transparent
}

a:hover, a:active {
    outline-width: 0;
    text-decoration: none
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

hr {
    border: 0;
    height: 1px
}

img {
    border-style: none
}

img:not([src]) {
    display: none
}

svg:not(:root) {
    overflow: hidden
}

html {
    -webkit-touch-callout: none;
    -webkit-text-size-adjust: 100%
}

input, textarea, button, a {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary {
    display: block
}

audio, canvas, progress, video {
    display: inline-block
}

audio:not([controls]), video:not([controls]) {
    display: none;
    height: 0
}

progress {
    vertical-align: baseline
}

mark {
    background-color: #ff0;
    color: #000
}

sub, sup {
    position: relative;
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline
}

sub {
    bottom: -0.25em
}

sup {
    top: -0.5em
}

button, input, select, textarea {
    font-size: 100%;
    outline: 0
}

button, input {
    overflow: visible
}

button, select {
    text-transform: none
}

textarea {
    overflow: auto
}

button, html [type="button"], [type="reset"], [type="submit"] {
    -webkit-appearance: button
}

button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0
}

button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText
}

[type="checkbox"], [type="radio"] {
    box-sizing: border-box;
    padding: 0
}

[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
    height: auto
}

[type="search"] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-input-placeholder {
    color: inherit;
    opacity: .54
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

.clear:after {
    display: block;
    height: 0;
    content: "";
    clear: both
}

清除浏览器默认样式

常用样式

/*div的样式*/
.dv {
    border:6px solid red; /*solid实线 dotted点点  double双线 dashed虚线  border-top/right/bottom/left */
    height:200px; /* 高度 可以设置数值，也可以设置百分比 */
    width:80%; /*宽度*/
    background-color: yellow; /*背景色*/
    float:left; /* 左浮动 right右浮动*/
    display:inline-block;/* display:block 让内联标签变为块级标签，这样内联标签就可以设置宽高了，独占一行;
                            display:inline 让块级标签变为内联变迁
                            display:inline-block既是块级标签又是内联标签 属性是：默认自己有多少占多少，可以设置高度，宽度，margin,padding
                            display:none 让标签消失 用js的时候用的多*/
    margin: 0 auto;/*外边距 上右下左 */
    padding: 0; /*内边距*/
}

/*文本的样式*/
.word {
    font-size: 20px; /*字体大小*/
    font-weight: bold; /* 加粗*/
    text-align:center;/*左右居中*/
    line-height: 200px;/*上下居中 数值设置为高度*/

}

内外边距 margin padding

position

position: fixed; 固定在页面的某个位置  页面 页面的某个位置

<div style="width:50px; height: 50px; background-color: black; color:white; position: fixed;bottom:20px;right:20px;">
    返回顶部
</div>
<div style="height: 5000px;background-color: gray">
/*position: fixed 表示固定下来了，bottom:20px;right:20px; 设置固定在那个位置，不会随着滚动条的滑动改变位置，返回顶部一般在右下角 ***注意这里的参照物是整个页面  是固定在整个页面的某个位置 */

父级 position: relative; 子级 position: absolute; 儿子以老子为参照物进行定位，不再是以页面

<div style="border:1px solid red; height: 200px; width: 200px; position: relative;margin: 0 auto;">
    <div style="height: 50px; width: 50px; background-color: #8aab30; position: absolute;
    bottom:20px;right:20px; text-align: center;line-height: 50px; ">
        小玩意
    </div>
</div>

<div style="border:1px solid red; height: 200px; width: 200px; position: relative;margin: 0 auto;">
    <div style="height: 50px; width: 50px; background-color: #8aab30; position: absolute;
    bottom:20px;right:-60px; text-align: center;line-height: 50px; ">
        小玩意 
    </div>
</div>

效果如下：

多层放在一起

z-index 数值越大，越是放在上边

<div style="z-index:10;position: fixed;top:50px;right: 700px;height: 200px;width:200px;background:white;"></div>
<div style="z-index:9;position: fixed;top: 0;bottom: 0;right: 0;left: 0; background-color: #333333; opacity: 0.5"></div>
<div style="z-index:8;height: 5000px;background-color: #8aab30;"></div>

效果如下：

overflow

hidden: 多余的隐藏否则图片会把div固有的宽度撑开

auto:会出现滚动条

<div style="height:200px;width:200px;overflow: hidden;">
    <img src="./yangmi.jpg" alt="girl">
</div>
<p></p>
<p></p>
<div style="height:200px;width:200px;overflow: auto">
    <img src="./yangmi.jpg" alt="girl">
</div>

效果如下：

hover

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .dv {
            border:1px solid red;
            height:80px;
            width:80px;
        }
        .dv .menu {
            display:inline-block;
            height:40px;
            width:40px;
            background-color: #4a92f5;
        }
        .dv .menu:hover{
            background-color: #8aab30;
        }

    </style>
</head>
<body>
<div class="dv">
<a class="menu" href="http://www.baidu.com">点点</a>
</div>

background

.share_icon span a{
    display: block;
    background: url(img/allPuzzle.png) no-repeat; #默认是重复 repeat-x水平方向重复 repeat-y垂直方向重复
    height: 28px;
    width: 28px;
}
.share_icon span.weibo a{
    background-position: -28px 0;
}
.share_icon span.zhifubao a{
    background-position: -56px 0;
}

##简写方式
background:white url("img/5.png") -105px -212px no-repeat;

转载于:https://www.cnblogs.com/lazyball/p/7635307.html

dcw93178

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css_new

css属性选择器class标签选择器 .名称 { ... } <标签 class='名称'></标签>　　在head里引入　　<head> 　　<link rel="stylesheet" href="style.css" />　　</head>i...
复制链接

扫一扫