css笔记

徐-XXM

于 2018-08-09 19:31:57 发布

阅读量280

点赞数

本文链接：https://blog.csdn.net/x_xxXmm/article/details/81511293

版权

1.css选择器：
a.标签选择器(如：body,div,p,ul,li) eg： p{color：red} 把p元素的字体内容变为红色；
b.类选择器 eg： .text{color:red } 把class=text的元素字体变为红色；
c.ID选择器 eg： #text{color:red } 把id=text的元素字体变为红色；
d.全局选择器eg： *{color:red } 全部字体变为红色；
e.组合选择器(如：.head .head_logo,注意两选择器用空格键分开 eg: .text .te{color:red } 把class=text和class=te的元素字体变为红色；
f.后代选择器 (从父集到子孙集的选择器) eg：div p{color：red } div后面的p全变成红色；
g.子选择器(具有父子关系) div>p

```
后代选择器和子选择器的差别
<style>
    div p{
        color:red;
    }
    /*后代选择器，11.12.13都会变红*/
    div>p{
        color:red;
    }
    /*子选择器，11.22会变红*/
</style>
<body>
<div>
    <p>11
        <p>12</p>
    </p>
</div>
<div>
    <p>22</p>
</div>
```

h.伪类选择器(就是链接样式,a元素的伪类：link、visited、active、hover。) eg: a:visted{color:red } 访问后的a变为红色；
i.相邻兄弟选择器器 (如：h1+p,带加号+) eg: h1+p{color:red } 把h1后面相邻的兄弟p变成红色；
2.css样式
（1）.背景：background：熟悉，不赘述
（2）.文本样式：text-indent：文本缩进，

<p id="p">这是在演示缩进这是在演示缩进这是在演示缩进这是在演示缩进这是在演示缩进</p>
#p{
    width:200px;
    text-indent:2em;
}

text-align:对齐方式。 left/right/center/justify 左对齐/右对齐/居中对齐/两端对齐
text-decoration：向文本添加修饰。 none：无效果（可用于去下划线） underline：加下划线 over-line：加上划线 line-through加删除线；
word-spacing 单词间距。负值会拉近距离，正值会放大距离； letter-spacing 汉字间距；
（3）字体格式 font-family：字体类型
font-size：字体大小
font-style：字体风格 normal 文本正常显示italic - 文本斜体显示
font-weight :字体粗细。 bold/bolder/100-900数字
100 ~ 900 为字体指定了 9 级加粗度。对应最细的字体变形，900 对应最粗的字体变形。数字 400 等价于 normal，而700 等价于 bold。
如果将元素的加粗设置为 bolder，浏览器会设置比所继承值更粗的一个字体加粗。与此相反，关键词 lighter 会导致浏览器将加粗度下移而不是上移。
（4）列表格式：list-style:url(example.gif) square inside


<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
li{
    border:solid black 1px;
    list-style: url(../img/1.gif) circle inside;
    （空心圆，有图片。空心圆在列表里面默认会在外面）
}

（5）表格样式：
border-collapse:collapse; 将表格边框折叠为单一边框；
text-align：表格内容水平居中方式。vertical-align：表格内容垂直居中方式；

写一个好看的表格
<table id="list">
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>男</td>
        <td>22</td>
    </tr>
    <tr>
        <td>梨花</td>
        <td>女</td>
        <td>21</td>
    </tr>
</table>
#list,th,td{
    border:solid 1px lightcoral;
    text-align:center;
    vertical-align:center;
}
th,td{
    width:50px;

}
th{
    background-color:lightblue;
}
td{
    background-color:lightgoldenrodyellow;
}
#list{
    border-collapse:collapse;
    /*合并为单一边框线*/
}

outline:在元素周围划线 outline：solid red 1px 在元素周围画1px的红色实线

（6）盒子模型

标准盒子模型 width=content的宽度
ie盒子模型 width=content+padding+border；
内边距padding； padding：上右下左；padding：上左右下； padding：上下左右； padding：上下左右；
外边距margin； margin：上右下左；margin：上左右下；margin：上下左右； margin：上下左右；外边距会有合并现象发生；
（7）CSS定位
position属性定位，position有4个值，定位后元素的位置通过left，right，top，bottom来设定；
static：默认值，没有定位；
relative：相对定位；相对于元素本身的位置进行定位；

<!--相对定位-->
<div id="top">
    <p>这是正常的元素</p>
    <p id="r_left">这是在演示相对定位的左移</p> 会相对正常元素向左移动10px；
    <p id="r_right">这是在演示相对定位的右移</p> 会相对正常元素向右移动10px；
</div>
/*相对定位*/
#r_left{
    position:relative;
    left:-10px;
}
#r_right{
    position:relative;
    left:10px;
}

absolute：绝对定位；在没有父元素或者父元素没有position属性的情况下，absolute参照浏览器位置进行定位；在父元素有position属性时，会根据父元素来进行定位；

<p id="a_nof">这是在演示绝对定位，在没有父元素时，他相对于浏览器左上角进行定位</p>
/*绝对定位没有父元素情况*/
#a_nof{
    position:absolute;
    left:20px;
    bottom:20px;
}



/*绝对定位有父元素情况*/
#a_yf{
    width:500px;
    height:500px;
    background:black;
}
#a_hf{
    width:100px;
    height:100px;
    background:red;
}
#father{
    width:300px;
    height:300px;
    background:yellow;
}
#son{
    width:50px;
    height:50px;
    background:lightgreen;
    position:absolute;
    left:0px;
    bottom:0px;
}


/*绝对定位有父元素情况*/
#a_yf{
    width:500px;
    height:500px;
    background:black;
}
#a_hf{
    width:100px;
    height:100px;
    background:red;
}
#father{
    width:300px;
    height:300px;
    background:yellow;
}
#son{
    width:50px;
    height:50px;
    background:lightgreen;
    position:absolute;
}
#son{
    left:0;
    bottom:0;
    /*父元素不设定position时，相对于浏览器进行定位；*/
}

#father{
    position:absolute;
    /*父元素设定position时，子元素相对于父元素进行绝对定位；*/
}
#son{
    left:20px;
    top:20px;

}

fixed：固定定位；相对于浏览器窗口进行定位，定好了就不会再动了；

/*fixed定位*/
<div>
    <p id="fixed">这是fixed定位，把它固定在浏览器的右下角，它就不会再动</p>
</div>

#fixed{
    position:fixed;
    right:0;
    bottom:0;
    width:200px;
    height:200px;
    background-image: url("../img/eg_sun.gif");
    background-repeat:no-repeat;
}

（8）CSS浮动
float属性：left：向左浮动，right：向右浮动，none：不浮动，inherit：继承父元素的浮动；
把图片浮动到文字中去：

<div class="float">
    <img src="../img/eg_venus.gif"/>
    <p>这是一段文字，我要把图片放到文字的右边去这是一段文字，
     的右边去这是一段文字，我要把图片放到文字的右边去</p>
</div>

.float{
    width:150px;
}
.float img{
    float:right;
}

把几个块浮动到一排

<div class="one"></div>
<div class="two"></div>
<div class="three"></div>

.one,.two,.three{
    width:200px;
    height:200px;
    float:left;
}
.one{
    background:lightpink;
}
.two{
    background:lightcyan;
}
.three{
    background:lightgreen;
}

（9）清空浮动（此处只写一种，即伪类，给父级div定义clearfloat）

<div class="no_float clearfloat" >
    <img src="../img/eg_venus.gif" class="img1"/>
    <img src="../img/eg_venus.gif" class="img2"/>
    <img src="../img/eg_planets.jpg"class="img3"/>
</div>
.clearfloat:after{
    display:block;
    clear:both;
    content:"";
    visibility:hidden;
    height:0；
}

（10）一些效果
使段落的首字浮动于文字左侧

<!--使段落的首字浮动在左侧-->
<div class="show">
    <span class="span">浮</span><p>动的框可以左右移动，直到遇到另一个浮动框或者遇到它外边缘的包含框。浮动框不属于文档流中的普通流，当元素浮动之后，不会影响块级元素的布局，只会影响内联元素布局。
    此时文档流中的普通流就会表现得该浮动框不存在一样的布局模式。当包含框的高度小于浮动框的时候，此时就会出现“高度塌陷”。</p>
</div>
.span{
    float:left;
    color:lightgreen;
    font-size:1.5em;
    font-weight:700;
    line-height: 80%;
    padding-right:2px;
}

（11）导航栏，导航栏即链接的列表，使用ul,li

<!--水平导航栏-->
<div class="nav">
    <ul>
        <li><a href="http://www.baidu.com" target="_blank">NAME</a></li>
        <li><a href="http://www.baidu.com" target="_blank">HOME</a></li>
        <li><a href="http://www.baidu.com" target="_blank">LINK</a></li>
        <li><a href="http://www.baidu.com" target="_blank">WORK</a></li>
        <li><a href="http://www.baidu.com" target="_blank">WHAT</a></li>
    </ul>
</div>

.nav ul{
    margin:0;
    padding:0;
    overflow:hidden;
}
.nav ul li{
    list-style:none;
    float:left;
    background:lightgray;
    margin-left:5px;

}
 a{
    width:100px;
    text-align:center;
     display:block;
     cursor:pointer;
     text-decoration:none;
     color:white;

}
.nav ul li a:hover{
     background:lightcoral;
 }
.nav ul li a:visited{
    background:lightgreen;
}

（12）opacity:透明度有两个值
opacity：inherit；从父元素继承opacity属性；
opacity：value从（0-1.0）全透明到完全不透明，IE8以及更早的版本：filter：alpha(opacity=value*10)

<!--写一个背景图片有透明文本框-->
<div>
    <div class="background">
        <div class="box">
            <p> 我也不知道这是个啥东西
                我也不知道这是个啥东西
                </p>
        </div>
    </div>
</div>

*{
    margin:0;
    padding:0;
}
p{
    solor:red;
}
p span{
    opacity:0.5;
}
img:hover{
    opacity:0.5;
    border:solid 1px red;
}

.background{
    width:215px;
    height:215px;
    background:url('../img/eg_planets.jpg') no-repeat;
    border:solid 1px lightcoral;
    margin:0;
}
.box{
    background:white;
    width:150px;
    height:150px;
    margin:25px auto;
    opacity:0.5;
    border:solid 1px black;
}
.box p{
    color:black;
    opacity:1;
    margin: 20px;
    line-height:20px;
}

（13）css3动画
2D动画：过渡transition 移动translate 旋转rotate 缩放scale 拉伸倾斜skew ；应用的时候写transform：transition（）
transton:两个值（希望添加的效果属性效果时长），需要做兼容；

鼠标放上去后长宽和透明度均有变化
<!--2d动画-->
<div class="animation_2d"></div>
/*2D动画*/
.animation_2d{
    width:100px;
    height:100px;
    background:yellow;
    transition:width 2s linear 0s,height 2s,opacity 2s;
    -moz-transition:width 2s,height 2s,opacity 2s; /* Firefox 4 */
    -webkit-transition:width 2s linear 0s,height 2s,opacity 2s; /* Safari and Chrome */
    -o-transition:width 2s,height 2s,opacity 2s; /* Opera */
}
.animation_2d:hover{
    width:250px;
    height:200px;
    opacity:0.5;
}

css3动画：@keyframe规则，需要做兼容；需要有定义有调用才能有效果；

<!--@keyframe动画-->
<div class="key_f"></div>

@keyframes myanimation {
      /*定义*/
    0% {background:lightcoral; transform: translate(0,0)}
    25% {background:lightgreen; transform: translate(0,20px)}
    50% {background:lightcyan; transform: translate(0,40px)}
    100% {background:lightgoldenrodyellow; transform: translate(0,60px)}
}
.key_f{
    animation:myanimation 5s linear infinite;
    /*调用*/
    width:200px;
    height:200px;
    background:lightcoral;
}

（14）css多列column
column-count:列数；
column-gap：列间距；
column-rule：间隔线；(solid 1px #000)

<p class="column">曾经某个时期，大多数开发者使用 jQuery 给浏览器中的元素添加动画。让这个淡化，
让那个扩大，很简单。随着互动的项目越来越复杂，移动设备的大量增加，表现性能变得越来越重要。Flash 
被抛弃，有天赋的动画开发者使用 HTML5 去实现过去从未实现的效果。他们需要更好的工具去开发复杂的动
画序列并获得最好的性能。jQuery 并不能够做到。浏览器日渐成熟的同时也开始提供了一些解决方案。最被
广泛接受的方案是使用 CSS 动画（以及 Transitions）。几年中，它成为了业内的热门话题，在各种研讨会
上，“硬件加速”和“移动端友好”之类的说法总是不绝于耳。基于 JavaScript 的动画总是被当做过时的甚至是
“肮脏的”。但是真的是这样吗？</p>
.column{
    column-count:3;
    -webkit-column-count:3;
    -moz-column-count:3;
    column-gap:15px;
    -webkit-column-gap:15px;
    column-rule:solid red 5px;

}

(14)resize属性:允许用户调整元素尺寸
属性值：none不允许用户控制元素尺寸，both允许用户控制元素的宽和高，vertical允许用户控制元素的高，horizontal允许用户控制元素的宽；

<div class="resize_box">
    <figure class="back_resize">
        <div></div>
    </figure>
.resize_box{
    max-width:300px;
    max-height:300px;
    overflow:hidden;

}
.back_resize{
    width:215px;
    height:260px;
   background-image:url(../img/eg_planets.jpg);
    resize:both;
    overflow:hidden;
}

（15）box-sizing属性：
box-sizing：content-box:设置的padding，border都在本身的内容之外，会导致内容比设置的更大；维持W3C标准的盒子模型；
box-sizing：border-box：设置的padding，margin，border都在本身的内容里面；维持IE盒子模型；
box-sizing：inherit：从父元素继承；
（16）outline-offset：轮廓边缘；

<div class="outline_offset">在边框20px处有轮廓边缘</div>
.outline_offset{
    padding:20px;
    margin:100px;
    width:200px;
    height:200px;
    border:solid 1px black;
    outline:solid 2px red;
    outline-offset:20px;
}

这里写图片描述
（17）appearance:让元素看上去像一个界面;
appearance:button;让元素看上去像一个按钮；normal：将元素呈现为常规元素

徐-XXM

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css笔记

1.css选择器： a.标签选择器(如：body,div,p,ul,li) eg： p{color：red} 把p元素的字体内容变为红色； b.类选择器 eg： .text{color:red } 把class=text的元素字体变为红色； c.ID选择器 eg： #text{color:red } 把id=text的元素字体变为红色； d.全局选择器(...
复制链接

扫一扫