第四十九天css进阶

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

标签：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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

第四十九天css进阶