HTML基础之CSS

css样式应用,有3种方式

1、标签内部通过style属性,来给标签设置css样式

<div id=i1 style="background-color: rebeccapurple;height: 100px;width: 100px">背景色div>

2、head中增加style标签,在style标签内部,通过id选择器为目标html配置css样式(id属性在使用时需添加#号)

<head>
<style>
#i1{ background-color: gold; height: 100px; width: 100px; } style> head> <body> <div id="i1">背景色div> body>

3、通过编写样式表文件**.css,在head标签中用link引入到当前html中

新建一个Stylesheet文件,以css结尾---》demo.css

demo.css文件内容:
#i2{
    background-color: palevioletred;
    height: 100px;
    width: 100px;
}



<head>

<link rel="stylesheet" href="demo.css">

head>

CSS优先级

标签中style优先级最高,其次以标签为中心在代码中就近找,也就是从下往上找,离哪个近就优先用哪个

选择器

id选择器

class选择器

标签选择器

层级选择器

属性选择器

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>

    <style>
        /*id选择器*/
        #i1{
            background-color: green;
            width: 100px;
            height: 100px;
        }

        /*class 选择器*/
        .c1{
            background-color: green;
            width: 100px;
            height: 100px;
        }
        .wh{
            width: 100px;
            height: 100px;
        }
        .bc-1{
            background-color: red;
        }
        .bc-2{
            background-color: blue;
        }
       
        /*标签选择器*/
        div {
            background-color: green;
        }

        /*层级选择器 很少用*/
        div span{
            background-color: red;
        }
        #i1 span{
            
        }
        .c1 span{
            
        }

        /*属性选择器*/
        div[dsx="nb"]{
            background-color: red;
        }
    style>

head>
<body>

    <div id="i1">ID选择器div>


    <div class="c1">class选择器div>


    <div class="wh bc-1">div>
    <div class="wh bc-2">div>


    <div class="wh">1111div>


    <div>
        <span>dsxspan>
    div>


    <div dsx="nb" class="wh">div>

body>
html>

display属性:


 
<div style="height: 100px;background-color: black;display: inline">外联标签div>
 

 
<span style="height: 100px;background-color: red;display: block;">内联标签span>
 

 

 
<span style="background-color: blue;width: 100px;height: 100px;">大师兄span>
 

 
<span style="background-color: blue;width: 100px;height: 100px;display: inline-block;">大师兄span>
 

 
<span style="background-color: #336699;display: none">我不显示的span>
 
 
 

 

 
<div style="border: 1px solid red;height: 100px">
 
<div style="background-color: blue;height: 70px;margin-top: 30px">div>
 
div>
 

 
<div style="border: 1px solid red;height: 100px">
 
<div style="background-color: blue;height: 70px;padding: 10px">内边距增加div>
 
div>

例子:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    
    <style>
       
        .wh {
            width: 100px;
            height: 100px;
        }

        .bc-1 {
            background-color: red;

        .dis-inline {
            /*由块级标签,变成行内标签*/
          display: inline;
        }
        .dis-block{
            /*行内转 块*/
            display: block;
        }
        .dis-block-inline{
            /*既是块也是行内*/
            display: inline-block;
        }
        .c1{
            border: 1px solid red;
            width: 100%;
            height: 200px;
        }
        .c2{
            background-color: blue;
            width: 100%;
            height: 48px;
            /*外边距*/
            /*margin-top: 0;*/
            /*内边距*/
            padding-top: 0;

        }
    style>

head>
<body>










<input type="text" placeholder="">
    <div class="c1">
        <div class="c2">div>
    div>

body>
html>

 

 

 

你可能感兴趣的:(HTML基础之CSS)