html css样式

1. 写样式的三种方式

<link>

<style>

<p style= ""></p>直接写在标签中

 

2. 多种样式时，取最近的样式。下面例子显示9C1A1C色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css练习</title>
    <style>/*在这里写式*/
        p{
            color: #1cc09f;
            /*background: #3A7734;*/
        }
    </style>
    <link rel="stylesheet" href="note.css"><!--    代表css样式-->
</head>
<body>
<p style="color: #9C1A1C">p标签</p>
</body>
</html>

3. 选择器
选择器
    id选择器
        精准的指向到某一个id的属性，同时只能生效一个id
    class选择器
        每个标签可以同时配置多个class属性，也就意味着可以同时生效多个样式信息
    标签选择器
        html的标签作为选择器，生效的都是那些没有被修改过的样式；
    属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css练习</title>
    <style>/*在这里写式*/
        /*id选择器*/
        #p1{
            color: #1cc09f;
        }
        #p2{
            color: #9C1A1C;
        }
        /*类选择器*/
        .font{
            font-family: "Lucida Console", "Courier New", Courier, monospace;
        }
        .col{
            color: #9C1A1C;
        }
        /*标签选择器*/
        div{
            font-size: xx-large;
        }
        /*属性选择器*/
        input[type="text"]{
            border: solid 2px red;
        }
    </style>
</head>
<body>
<p id="p1">id样式1</p>
<p id="p2">id样式2</p>
<p class="font col">class样式</p>
<div>标签选择器</div>
<input type="text"  >
<input type="password">
</body>
</html>

4 常见的样式有哪些？
3、都有哪些样式？
    背景色：
        background-color
    字体颜色：
        color
    字体大小：
        font-size
    宽、高
        height:
        width:
    边框
        border: 2px  solid  firebrick;

    内外边距
        pandding
            内边距：元素和内部元素的间距叫内边距
        margin
            外边距：元素和外部的间距叫外边距
    位置position、float
        position: 
            fixed:固定在某一个位置 
            absolute: 绝对位置,找的是屏幕的绝对位置   通过top、left、right、bottom来进行控制
            relative:相对父元素位置    通过top、left、right、bottom来进行控制

    display:
        inline: 把块级标签转为行内标签，如 <p>  
        block:  把行内标签转为块级标签 ，如<span>
        inline-block: 即是块级又是行内标签
        None:不现实，隐藏 
bootstrap
    中文官方地址：https://v3.bootcss.com/
    引入的时候需要引入css+js文件 
    引入方式可以用 官方cdn上的文件，也可以下载下来引入本地的文件


posted @ 2021-04-07 14:35  Mia妈妈加油呀  阅读(116)  评论(0)    收藏  举报