前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Day3:html和css

Day3:html和css

作者头像
达达前端
发布2019-07-03 10:04:52
1.5K0
发布2019-07-03 10:04:52
举报
文章被收录于专栏:达达前端
标题图

Day3:htmlcss

多类名选择器

样式的显示效果是跟html元素中的类名先后顺序无关,而是跟css样式的书写上下顺序有关.

代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <style>
     .red {
        color: red;
     }
     .font {
        font-size: 20px;
        color: blue;
     }
    </style>
</head>
<body>
    <div class="font red">多类名</div>
    <div>多类名</div>
    <p class="red">多类名</p>
    <p>多类名</p>
    <p class="red">多类名</p>
    <div>多类名</div>
</body>
</html>

id选择器

id选择器是使用#符号的:

代码语言:javascript
复制
#id名{属性:属性值;}

class好比人的名字,可以多次使用,而id选择器是代表唯一的,如人的身份证号码.一个id只能使用一次.(不允许使用多次,浏览器兼容性好,虽然可以用多次,但是是不允许这样做的)

id只使用一次,class可以使用多次.

代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <style>
    #lt {
        color: blue;
    }
    </style>
</head>
<body>
    <div>id选择器</div>
    <div id="lt" class="red">id选择器</div>
</body>
</html>

通配符选择器

*代表所有,通配符选择器用*号表示.

代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <style> 
     * {
        color: blue;
     }
    </style>
</head>
<body>
    <div>我是文字</div>
    <p>我是文字</p>
    <span>我是文字</span>
    <table>我是文字</table>
</body>
</html>

基础选择器

  1. 标签选择器 - <div> <span> <table> <input>
  2. 类选择器 - .nav可使用多次
  3. id选择器 - 只能使用一次
  4. 通配符选择器 - 几乎不用

字体样式

css是如何控制样式的

代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <style>
    * {
        font-family: "microsoft yahei",  Arial;
    }
    p {
        font-size: 16px;  
        line-height: 28px;  
        text-indent: 2em; 
    }
    a {
        font-weight: 700;  /* 700 没有单位  ==  bold  */  
    }
    h1 {
        font-weight: 400;  /*让粗体不加粗  400 == normal 建议用数值*/
        text-align: center; /*文字水平居中*/
    }
    em {
        color: blue;
        font-style: normal; 
    }
    span {
        color: #FDD000;
    }
    div {
        text-align: center;
    }
    .nub {
        color: #f00;
        font-weight: 400;  
    }
    </style>
</head>
<body>
    <h1>123</h1>

<div>2018 <span>体育</span><a href="#">收藏本文</a></div>
<hr />
<p>新浪<em>[微博]</em>中国</p>
</body>
</html>

字体样式属性:

font-size字体大小;

单位

说明

em

1em相当于一个字体

px

像素

in

英寸

mm

毫米

pt

在网页统一使用px

font-family:字体

代码语言:javascript
复制
p{font-family:"微软雅黑";}

font-weight:字体

语法:

代码语言:javascript
复制
font-weight: normal | bold | bolder | lighter | number |
参数:
normal正常字体
bold:粗体
span{ font-weight: 600}

font-style:字体类型

代码语言:javascript
复制
// 语法

font-style: normal  | italic |
italic: 斜体

要点: 数字400等于normal,而700等于bold font-style font-weight font-size font-family

代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <style>
    h1 {
        /*font-size: 25px;
        font-family: "宋体";
        font-weight: 400;*/
    }
    /*选择器{font: font-style  font-weight  font-size/line-height  font-family;}*/
    h1 {
        font: 12px "微软雅黑";
    }
    </style>
</head>
<body>
    <h1>字体连写</h1>
</body>
</html>

文本样式

color属性:

  1. 预定义的颜色
  2. 十六进制
  3. RGB代码

红加绿黄,红绿蓝.

line-height:行间距 text-align:水平居中,让盒子中的文本居中 text-indent:首行缩进

代码语言:javascript
复制
left right center

效果

textOdecoration文本的修饰

说明

none

默认

underline

文本下的一条线

overline

定义文本上的一条线

line-through

定义穿过文本下的一条线

语法:

代码语言:javascript
复制
text-decoration : none || underline || blink || overline || line-through 

参数:

代码语言:javascript
复制
none :  无装饰
blink :  闪烁
underline :  下划线
line-through :  贯穿线
overline :  上划线 
代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dome</title>
    <style>
    div {
         font-size: 30px;
          /*text-decoration: none;  取消装饰*/
          /*text-decoration: underline; 下划线*/
          /*text-decoration: overline; 上划线*/
          /*text-decoration: line-through;  删除线*/
          font-style: italic;
    }
    s {
        text-decoration: none; /* 取消删除线*/
    }
     em {
        font-style: normal;  
     }
     strong {
        font-weight: 400;
     }
     ins {
        text-decoration: none;
     }
    </style>
</head>
<body>
    <div>达叔小生</div>
    <s>现在</s>
    <em>倾斜</em> 
        <i>倾斜</i>
    <strong>加粗</strong>
    <ins>下划线</ins>
</body>
</html>

复合选择器

代码语言:javascript
复制
// 子代选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <style>
    ul li  a  {  
        color: red;
    }
    ul li > a {  
    }
    ul  a  {
        color:red;
    }

    ul > li > a {
    }
    </style>
</head>
<body>
    <ul>
        <li>
            <a href="#">一级菜单</a>
            <div>
                <a href="#">二级菜单</a>
                <a href="#">二级菜单</a>
                <a href="#">二级菜单</a>
            </div>
        </li>
    </ul>
</body>
</html>

后代选择器

代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dome</title>
    <style>
     .father > li > a {
        color: red;
     }
    </style>
</head>
<body>
    <ul class="father">
        <li>
           <a href="#">123</a>
           <ul>
                <li>
                    <a href="#">abc</a>
                </li>
            </ul>
        </li>
    </ul>
</body>
</html>

后代选择器例子:

代码语言:javascript
复制
div p {
 color: blue;
}

<div>
 <p> </p>
</div>
代码语言:javascript
复制
.da p{
 color: blue;
}
<div class="da">
 <p></p>
</div>
代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <style>
    div p  {  
        color: pink;
    }
    .jianlin p {
        color: purple;
    }
    ul li {
        color: red;
    }
    </style>
</head>
<body>
    <div> 1 </div>
    <div> 1 </div>
    <div> 1 </div>
    <div> 
        <p>2</p> 
    </div>
    <div> 
        <p>2</p>       
    </div>
    <div> 
        <p>2</p>       
    </div>
    <div class="jianlin"> 
        <p>3</p>       
    </div>

    <p> 1 </p>
    <p> 1 </p>

    <ul>
        <li>苹果</li>
        <li>梨子</li>
        <li>苹果</li>
        <li>梨子</li>
    </ul>
    <ol>
        <li>苹果</li>
        <li>梨子</li>
        <li>苹果</li>
        <li>梨子</li>
    </ol>

</body>
</html>

交集选择器和并集选择器

代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <style>
        div.red {  
            color: red;
        }
    </style>
</head>
<body>
    <div>交集选择器</div>
    <div class="red">交集选择器</div>
    <p>交集选择器</p>
    <p class="red">交集选择器</p>
</body>
</html>
代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <style>
    div, p, span {   
        color: red;
    }
    </style>
</head>
<body>
    <div>并集选择器</div>
    <p>并集选择器</p>
    <span>并集选择器</span>
    <h1>并集选择器</h1>
    <a href="#">并集选择器</a>
</body>
</html>

链接伪类选择器

代码语言:javascript
复制
:link 未访问的链接
:visited 已访问的链接
:hover 鼠标移动到链接上
:active 选定的链接
代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <style>
    a:link {  /* 未访问过的连接状态*/
        color: #3c3c3c;
        font-size: 25px;
        text-decoration: none;  /*取消下划线*/
        font-weight: 700;
    }
    a:visited {  
        color: orange;
    }
    a:hover {  /*鼠标经过连接时候的样子*/
        color: #f10215;
    }
    a:active {  /*鼠标按下时候的样子*/
        color: green;
    }

    </style>
</head>
<body>
    <a href="http://www.12312312.com"></a>
</body>
</html>
代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <style>
     a {
        color: #333;
        text-decoration: none;
        font-size: 25px;
        font-weight: 700;
     }
     a:hover {  /*鼠标经过*/
        color: #f10215;;
     }
    </style>
</head>
<body>
    <a href="http://2312312312.com"></a>
</body>
</html>
代码语言:javascript
复制
    <style>
       .site-r a {
          color: red;
       }
       .nav a {  /*后代选择器*/
          color: orange;
       }

       .nav, .sitenav {   /*并集选择器*/
            font: 14px "微软雅黑";
       }
       .nav> ul > li > a {  /*子代选择器*/
        color: green;   /*123123123  */
       }
    </style>

显示模式

display显示模式

block-level块级元素

代码语言:javascript
复制
<h1>~<h6>, <p>, <div>, <ul>, <ol>, <li>等

inline-level行内元素

代码语言:javascript
复制
<a>, <strong>, <b>, <em>, <i>, <del>, <s>, <ins>, <u>, <span>

行内元素的特点.png

块级元素的特点.png

行内块元素(inline-block)

代码语言:javascript
复制
<img/> <input/> <td>

行内块元素的特点.png

代码语言:javascript
复制
块转行内: display:inline
行内转块: dispaly:block;
块,行内元素转为行内块: dispaly: inline-block;
代码语言:javascript
复制
// 转换
    <style>
    div {
        width: 100px;
        height: 100px;
        background-color: pink;
        display: inline;   /*把块级元素转换为行内元素*/
    }
    span {
        width: 100px;
        height: 100px;
        background-color: purple;
        display: block;   /*把行内元素转换为块级元素*/
    }
    a{
        width: 100px;
        height: 100px;
        background-color: skyblue;
        display: inline-block;   /*把行内元素转换为行内块元素*/
    }
    </style>
<body>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <span>abc</span>
    <span>abc</span>
    <span>abc</span>
    <a href="#">百度</a>
    <a href="#">百度</a>
    <a href="#">百度</a>
    <a href="#">百度</a>
</body>
代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <style>
    .nav {
        text-align: center;
    }
    .nav a{ 
        width: 120px;
        height: 50px;
        display: inline-block;
        background-image: url(images/bg.png);
        text-align: center;
        color: #fff;
        text-decoration: none;
        line-height: 50px; 
    }

    .nav a:hover { 
        background-image: url(images/bgc.png);
    }
    .banner {
        text-align: center;
    }
    p {
        width: 100px;
        height: 20px;
        display: inline-block;
    }
    </style>
</head>
<body>
    <div class="nav">  
        <a href="#">网站导航</a>
        <a href="#">网站导航</a>
        <a href="#">网站导航</a>
        <a href="#">网站导航</a>
    </div>
    <div class="banner">
        <p>123</p>
    </div>
    <a href="#">baidu</a>
</body>
</html>

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

结语

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

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

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

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 多类名选择器
  • id选择器
  • 通配符选择器
  • 字体样式
  • 文本样式
  • textOdecoration文本的修饰
  • 链接伪类选择器
  • 显示模式
  • inline-level行内元素
  • 行内块元素(inline-block)
  • 结语
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档