首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Day4:html和css

Day4:html和css

作者头像
达达前端
发布2019-07-03 13:17:14
3.9K0
发布2019-07-03 13:17:14
举报
文章被收录于专栏:达达前端达达前端
Day4:htmlcss

规范注意

  1. 链接里面不能再放链接.
  2. a里面可以放入块级元素.

空格规范

选择器与{之间必须包含空格.

如:

.class {}

属性名与之后的:符号之间不允许包含空格, 而:符号与属性值必须包含空格.

如:

font-size: 23px;

选择器的规范

如:

// 并集选择器
.da,
.shu,
.coding {
 color: blue;
}

选择器的嵌套层级不大于3级就行.

#da input {}
.shu .coding {}

行高可以让一行文本在盒子中垂直居中对齐,文字的行高等于盒子的高度,行高-上距离-内容高度-下距离.

css三大特性是层叠,继承,优先级.

层叠 继承 优先级

div {
 height: 50px;
 width: 200px;
 background-color: pink;
 line-height: 500px;
}
div: {
}

css层叠样式表

css的优先级

  1. 使用!important声明的规则
  2. 使用内嵌声明
  3. 使用id选择器
  4. 使用类选择器,属性选择器,伪元素和伪类选择器
  5. 使用元素选择器
  6. 只包含一个通用选择器
  7. 同一类选择器则遵循就近原则

总结:权重是优先级的算法,层叠是优先级的表现 类选择器的优先级比标签的元素高.

我们在使用css的时候,会出现两个或多个规则在同一元素上,这时css就会出现优先级的情况.

css中的样式继承权重值是为0的,不管父元素权重多大,被子元素继承时,它的权重都是为0,意思是子元素定义的样式会覆盖继承的样式,行内样式优先.在css中,如果权重相同,css就会遵循就近原则,则是靠近元素最近的样式为最大优先级.

css中定义了!important命令,这个命令就被赋予最大的优先级.

// 就近原则
div {
 color: red;
 font-size: 50px;
}
div {
 color: blue;
}

<div>达叔</div>

样式冲突,遵循就近原则,样式不冲突,不会层叠.

继承性,子承父业(部分继承,文本属性的继承)

<div class="da">
 <p> dd </p>
</div>
div {
 color: red;
}
.da {
 color: blue;
}
<div class="da">dashucoding</div>

特殊性

继承或者* 的贡献值

0,0,0,0

每个元素(标签)贡献值

0,0,0,1

每个类贡献值

0,0,1,0

每个ID贡献值

0,1,0,0

每个行内样式贡献值

1,0,0,0

每个!important贡献值

∞ 无穷大

行内样式 , id , 类 , 标签

#father {
 color: red;
}
p {
 color: blue;
}

<div id="father">
 <p> 大佬 </p>
</div>

// blue
p.c {
 color: blue;
}
div p {
 color: red;
}
#father {
 color: red;
}
<body>
 <div id="father" class="cc"
 <p class="c"> dashucoding </p>
 </div>
</body>

背景

CSS 可以添加背景颜色和背景图片,以及图片设置。

background-color

背景颜色

background-image

背景图片地址

background-repeat

是否平铺

background-position

背景位置

background-attachment

背景固定还是滚动

背景的合写(复合属性)

background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置

backgroound-position

语法:

background-position: length
background-position: position

参数:

length: 百分数
position: top | center | right | left | bottom

background:背景颜色,背景图片地址,背景平铺,背景滚动,背景位置.

背景图片

语法:

background-image : none | url (url) 
// none :  无背景图(默认的)
// url :  使用绝对或相对地址指定背景图像 
如果图片不重复地话,图片覆盖不到的地方都会被背景色填充,如果背景图片平铺,则会覆盖背景颜色。

背景平铺(repeat

background-repeat : repeat | no-repeat | repeat-x | repeat-y 

参数:

  1. repeat :  背景图像在纵向和横向上平铺(默认的)
  2. no-repeat :  背景图像不平铺
  3. repeat-x :  背景图像在横向上平铺
  4. repeat-y :  背景图像在纵向平铺

设置背景图片时,默认把图片在水平和垂直方向平铺以铺满整个元素。

background-position : length || length
background-position : position || position 

参数:

length :  
百分数 | 由浮点数字和单位标识符组成的长度值
position :  
top | center | bottom | left | center | right 

背景附着

语法:

background-attachment : scroll | fixed 

参数:

`scroll` :  背景图像是随对象内容滚动
`fixed` :  背景图像固定 

背景透明(CSS3)

background: rgba(0,0,0,0.3);

background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置

图片效果展示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <style>
    a {
        width: 66px;
        height: 33px;
        background: url(123.png) no-repeat left top;
        display: block;  
    }
    a:hover {
        background-position: left bottom;
    }
    </style>
</head>
<body>
    <a href="#"></a>
</body>
</html>

引入css样式表

  1. 内部样式表
  2. 行内样式
  3. 外部样式表
// 内部样式表
<head>
<style type="text/CSS">
    选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>
// 行内式(内联样式)
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
//  外部样式表(外链式)
<head>
  <link href="CSS文件的路径"  rel="stylesheet" />
</head>

基础选择器

  1. 标签选择器(元素选择器)
  2. 类选择器
  3. 多类名选择器
  4. id选择器
  5. id选择器和类选择器区别
  6. 通配符选择器
// 标签选择器(元素选择器)div  span
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }  或者
元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
// 类选择器
.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
// 多类名选择器
<div class="pink fontWeight font">1</div>
<div class="font">2</div>
<div class="font pink">安3拉</div>
<div class="font">4</div>
// id选择器
#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
// 通配符选择器
* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

* {
  margin: 0;                    /* 定义外边距*/
  padding: 0;                   /* 定义内边距*/
}

字体样式属性

  1. font-size:字号大小
  2. font-family:字体
  3. font-weight:字体粗细 - 属性值:normalboldbolderlighter100~900100的整数倍)- 数字 400 等价于 normal,而 700 等价于 bold
  4. font-style:字体风格 - normal:默认值
  5. font:综合设置字体样式 (重点)
// `font`属性
选择器{font: font-style  font-weight  font-size/line-height  font-family;}

外观属性

  1. color:文本颜色 - redgreenblue
  2. line-height:行间距
  3. text-align:水平对齐方式
  4. text-indent:首行缩进
  5. text-decoration 文本的装饰

CSS复合选择器

  1. 交集选择器
  2. 并集选择器
  3. 后代选择器
  4. 子元素选择器
  5. 伪类选择器
// 交集选择器
p.one  段落标签 类名为 .one 
// 并集选择器
.one, p , #test {color: #F00;}
// 后代选择器
后代选择器又称为包含选择器
当标签发生嵌套时,内层标签就成为外层标签的后代。
// 子元素选择器
父级标签写在前面,子级标签写在后面
.demo > h3 {color: red;}
h3 一定是demo 亲儿子
// 伪类选择器
类  .one  
伪类 :link

链接伪类选择器
- :link      /* 未访问的链接 */
- :visited   /* 已访问的链接 */
- :hover     /* 鼠标移动到链接上 */
- :active    /* 选定的链接 */

CSS注释

/*  需要注释的内容  */  

标签显示模式

  1. 块级元素(block-level)
  2. 行内元素(inline-level)
  3. 行内块元素(inline-block
// 块级元素(block-level)
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等
(1)总是从新行开始
(2)高度,行高、外边距以及内边距都可以控制。
(3)宽度默认是容器的100%
(4)可以容纳内联元素和其他块元素
// 行内元素(inline-level)
(1)和相邻行内元素在一行上。
(2)高、宽无效,但水平方向的padding和margin可以设置,垂直方向的无效。
(3)默认宽度就是它本身内容的宽度。
(4)行内元素只能容纳文本或则其他行内元素。(a特殊 a里面可以放块级元素 )
行内块元素(inline-block)
(1)和相邻行内元素(行内块)在一行上,但是之间会有空白缝隙。
(2)默认宽度就是它本身内容的宽度。
(3)高度,行高、外边距以及内边距都可以控制。
块转行内:display:inline;
行内转块:display:block;
块、行内元素转换为行内块: display: inline-block;

三大特性

  1. CSS层叠性
  2. CSS继承性
  3. CSS优先级
// CSS特殊性(Specificity)
权重是优先级的算法,层叠是优先级的表现

css背景

  1. 背景图片(image)
  2. 背景平铺(repeat
  3. 背景位置(position)
// 背景图片(image)
background-image : none | url (url) 
none :  无背景图(默认的)
url :  使用绝对或相对地址指定背景图像 
// 背景平铺(repeat)
background-repeat : repeat | no-repeat | repeat-x | repeat-y
repeat :          背景图像在纵向和横向上平铺(默认的)
no-repeat :  背景图像不平铺
repeat-x :  背景图像在横向上平铺
repeat-y :  背景图像在纵向平铺 
// 背景位置(position)
background-position : length || length
background-position : position || position

length :  百分数
position :  top | center | bottom | left | center | right
// 背景附着
background-attachment : scroll | fixed 
scroll :  背景图像是随对象内容滚动
fixed :  背景图像固定 

背景简写 background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置

案例:

// css 层叠样式表
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <style>
    div {
        color: red;
        font-size: 25px;
    }
    div {
        color: blue;
    }
    </style>
</head>
<body>
    <div>层叠样式表</div>
</body>
</html>
// 继承权重为0的情况
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <style>
    .father { /* 0010*/
        color: green!important;
    }
    p {   /*0001*/
        color: red;
    }
    div p {
        color: blue;
    }
    </style>
</head>
<body>
    <div class="father">
        <p>继承权重为0的情况</p>
    </div>
</body>
</html>

背景透明

background: rgba(0,0,0,0.3);

border

border : border-width || border-style || border-color 
none:没有边框即忽略所有边框的宽度(默认值)
solid:边框为单实线(最为常用的)
dashed:边框为虚线  
dotted:边框为点线
double:边框为双实线
border-top-style:样式; 
border-top-width:宽度;
border-top-color:颜色;
border-top:宽度

border-bottom-style:样式;
border- bottom-width:宽度;
border- bottom-color:颜色;
border-bottom:宽度

border-left-style:样式; 
border-left-width:宽度;
border-left-color:颜色;
border-left:宽度

border-right-style:样式;
border-right-width:宽度;
border-right-color:颜色;
border-right:宽度
// 表格的细线边框
collapse 单词是合并的意思
table{ border-collapse:collapse; }
// 圆角边框(CSS3)
border-radius: 50%;
// 内边距(padding)
padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left:左内边距
// 外边距(margin)
margin-top:上外边距
margin-right:右外边距
margin-bottom:下外边距
margin-left:上外边距
margin:上外边距 右外边距  下外边距  左外边
文字水平居中是  text-align: center
盒子水平居中  左右margin 改为 auto

背景透明

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <style>
    body {
        background-color: pink;
    }
    div {
        width: 200px;
        height: 200px;
        color: #fff;
        background: rgba(0, 0, 0, 0.3); 
    }
    </style>
</head>
<body>
    <div>
        文字
    </div>
</body>
</html>

盒子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <style>

    div {
        width: 200px;
        height: 200px;
        /*border-style: solid; 实线*/
        /*border-style: dashed;  虚线 的  */
        border-bottom: 2px solid green;
        border-left: 1px solid blue;
        border-right: 5px solid pink;
    }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

表单边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <style>
    input {
        border: 0;
        border-bottom: 1px dashed red; 
    }
    button {
        width: 50px;
        height: 25px;
        border: 1px solid purple;
    }
    </style>
</head>
<body>
    用户名: <input type="text">
    <button>按钮</button>
</body>
</html>

内边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <style>
    div {
        width: 200px;
        height: 200px;
        border: 1px solid red;
        padding: 10px; 
    }
    a {
        height: 35px;
        background-color: #ccc;
        display: inline-block;
        line-height: 35px;
        color: #fff;
        text-decoration: none;
        padding-left: 10px;
        padding-right: 10px;
    }
    </style>
</head>
<body>
    <div>文本信息</div>
    <a href="#">首页</a>
</body>
</html>

边框

    <style>
    table {
        width: 500px;
        height: 300px;
        border: 1px solid red;
    }
    td {
        border: 1px solid red;
        text-align: center;
    }
    table, td {
        border-collapse: collapse; 
    }
    </style>

达叔小生:往后余生,唯独有你 You and me, we are family ! 90后帅气小伙,良好的开发习惯;独立思考的能力;主动并且善于沟通 简书博客: 达叔小生 https://www.jianshu.com/u/c785ece603d1

结语

  • 下面我将继续对 其他知识 深入讲解 ,有兴趣可以继续关注
  • 小礼物走一走 or 点赞
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018.12.25 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 特殊性
  • 背景
  • 背景图片
  • 背景平铺(repeat)
  • 背景附着
  • 背景透明(CSS3)
  • 引入css样式表
  • 基础选择器
  • 字体样式属性
  • 外观属性
  • CSS复合选择器
  • CSS注释
  • 标签显示模式
  • 三大特性
  • css背景
  • border
  • 背景透明
  • 盒子
  • 表单边框
  • 结语
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档