ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

第四十九天css进阶

2020-03-26 14:01:56  阅读:18  来源: 互联网

标签:Code 进阶 color 第四十九 red margin display css View



li{
    display: inline-block;
    list-style-type: none;
    background-size: 1000px;
    background-color: black;
    color:white;
    border-right:1px solid red;
}
/*设置最后一个没有边框*/
li.last{
    border-right: none;
}
View Code

 

1.属性记录的补充:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <link rel="stylesheet" href="01属性补充.css">
    <meta charset="UTF-8">
    <title>属性补充</title>
</head>
<body>
<div s1="good">
    风和日丽
</div>
<div s1="helloo">傅晶晶一一回复速度</div>
<div s1="gonng">付定金JFK就</div>
<div s1="">金发的京津冀</div>
</body>
</html>
View Code

 

  1.1匹配属性值里面的所有元素:

[s1]{
    color:red;
    font-size: 34px;
}
View Code

  1.2匹配符合字符段的所有元素

[s1="helloo"]{
    color:red;
    font-size: 34px;
}
View Code

  1.3匹配以某个字符结尾的所有元素:

[s1$="o"]{
    color:red;
    font-size: 34px;
}
View Code

  1.4匹配属性值里面的字符串包含这些字母的所有元素:

[s1*="oo"]{
    color:red;
    font-size: 34px;
}
View Code

2.对于一个链接,怎么在制作前端时进行颜色区分浏览过和没有浏览过:

  2.1设置一个位流览过网址字体的颜色:

a:link{
    color:red;
}
View Code

  2.2设置一个浏览过字体的颜色:

a:visited{
    color:green;
}
View Code

  2.3设置鼠标点上网页名称时有颜色变化的方法:

a:hover{
    color:blue;
}
View Code

  2.4:点上标签颜色改变的方法:

a:active{
    color:black;
}
View Code

  2.5:改变输入框背景颜色的方法:

div>input:focus{
    outline:green;
    background-color:red;
}
View Code

3.伪代码:

  3.1调节某一段落首个字符的样式:

p:first-letter{color:red;
font-size:34px;}
View Code

  3.2在某个元素的前面加上某个字符:

div>ul>li:before{
    content:'我是';
    color:red;
View Code

  3.3在某个元素后面添加某些字符:

div>ul>li:after {
    content: '我是';
    color: red;
}
View Code

4.通用格式设置中·

  4.1要设置字体格式:font-famliy

*{
    font-family: "Microsoft YaHei" ,"微软雅黑","Arial" ;
}
View Code

  4.2字体粗细设置:

    1.normal  默认值,不过不进行设置系统默认选择这一个。

    2.bord粗体。

    3.border更粗。

    4,lighter:更细。

  .43设置字体的颜色格式;

/*直接输入颜色的英文字母*/
.c1{
    color:red;
}
/*输入三个颜色的对比度*/
.c2{
    color:rgb(0,255,0)
}
/*可以加上a透明度范围是从0到1*/
.c3{
    color:rgba(0,255,0,0.3)
}
View Code

  4.4.文本的对齐方式:

/*文本中间对齐*/
.c1{
    text-align: center;
}
/*文本靠右对齐*/
.c2{
    text-align: right;
}
/*文本靠左对其*/
.c3{
    text-align: left;
}
/*两端对齐*/
.c4{
    text-align: justify;

}
View Code

  4.5文本的格式样式:

/*给文本添加下划线*/
.c1{
    text-decoration: underline;
}
/*去掉链接上的横线*/
.c2{
    text-decoration: none;
}
/*文本上有一条横线*/
.c3{
    text-decoration: overline;
}
View Code

  4.6对文本进行首行缩进:

/*给文本进行首行缩进*/
.c1{
    text-indent:12px;

}
View Code

  4.7背景页面的设置:

/*给文字背景的设置*/
.c1{
 background: red;

}
View Code
.header-img{
    height:100px;/*图片样式大小*/
    width:100px;
    border:5px solid white;/*设置图片背景边框*/
    border-radius:50%;/*把背景边框设置成圆*/
    overflow:hidden;/*把多余的图片部分进行隐藏*/
    margin: 0 auto;
}
.header-img>img{max-width: 100%  ;
}
View Code

  4.8  如何把图片背景进行固定:

 background-attachment:fixed ;
View Code

5.一个背景不动的案例:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <link rel="stylesheet" href="背景不动实例.css">
    <meta charset="UTF-8">
    <title>背景不动实例</title>
</head>
<body>
<div class="cl"></div>
<div class="c2"></div>
<div class="c3"></div>
</body>
</html>
View Code
.c1{
     height:1000px;
    backgroud-color:red;
    width:100%;
}
.c2{
    background-image: url('011.jpg') ;
    height: 300px;
    backgroud-attachment:fixed;
}
.c3{
    height:100px;
    background0-color: pink;
    width:100%
}
View Code

6.边框样式的设计:

.c1{
    height:300px;
    width:200px;
    border:4px solid red;
    borde
}
View Code

7.display的方法:

.c1{
    background:red;
    width: 100%;
    display:inline-block;
}
.c2{
    display:block;/*变成块级标签*/
    background: green;
}
View Code

  1.display none html文档存在,但是在浏览器中不显示。一般和js配合使用

  2.display biock 默认沾满整个页面的宽度,如果设定了指定的宽度,则会用margin 填充剩下的部分。

  3.display inline  按行内元素显示,此时设置的width、height margin float 属性都不会有影响。(块级标签无法设置高度和width和margin)

  4.display inline-block 是元素同时具有行内元素和块级元素的特点。

  7.2 display none和visiblity hidden的区别:

visibilty hidden 可以隐藏某个元素,但隐藏的元素还是要占用为隐藏之前一样的空间。也就是说,该元素虽然被隐藏了的但是依然影响布局。

display none 也可以隐藏某个元素,且隐藏后不占据任何空间。也就是说,该元素不仅被隐藏了,而且该元素原本所占据的空间也从布局中消失了。

8.为什么我删除不了最后一个:

.c1{
    background:red;
    width: 100%;
    display:inline-block;
}
.c2{
    display:block;/*变成块级标签*/
    background: green;
}
li{
    display: inline;
    list-style-type: none;
    padding-right: 12px;
    border-right:1px solid red;
}
li.second{
    border-right:none;
}
View Code

9.padding :是内容区和边框区之间的距离,margin是两个边框直接的距离

10margin外边距:使用规则是上右下左:

/*设置外边距*/
.c6{
    margin-top:14px;
    margin-right:13px;
    margin-bottom:12px;
    margin-left:15px;
}
/*上面可以简写成如下*/
.c7{
    margin:14px 13px 12px 15px;
}
View Code

11.怎么文本框串进行居中显示:

.c7{
    height: 15px;
    width:15px;
    border: 1px solid green;
    margin: 0 auto;

}
View Code

12.。float功能;

  在css中,任何元素都是可以进行浮动的,浮动的元素回生成一个块级框,(不管它本身是何种元素)

  12.1浮动框的两个特点;

1.浮动框可以向左或者向右移动,直到碰到外边框或者另一个浮动边框为止。

2.由于浮动边框不在文当的普通流中,所以文档的普通流中的块框表现的浮动框就不复存在了。

  12.2浮动的第一个案列;(浮动有三种取值:left(左)、right(右)、none(不浮动)

/*通用布局设置*/
*{
    margin: 0 0;
    padding: 0 0;
}
/*让c1和c2在同一行不同的比例面进行显示*/
.c1{
    height:133px;
    width:30%;
    background-color:green ;
    float:left
}
.c2{
    height:133px;
    width:70%;
    background-color: red;
    float:right;
View Code

  12.3看下面一个程序,发现有什么问题:

*{
    margin: 0 0;
    padding: 0 0;
}
#s1{
    border: 1px solid green;
}
View Code

结果为

如果进行以下的程序会有什么结果:

/*通用布局设置*/
*{
    margin: 0 0;
    padding: 0 0;
}
#s1{
    border: 1px solid green;
}
.c1,
.c2{
    float:left;
}
View Code

 



标签:Code,进阶,color,第四十九,red,margin,display,css,View
来源: https://www.cnblogs.com/ab461087603/p/12574047.html

专注分享技术,共同学习,共同进步。侵权联系[admin#icode9.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有