css学习 01-CFANZ编程社区

css学习 01

三种引入方式

1 head标签里面的




    <style>
        div{
            background-color: red;
            height: 100px;
            width: 100px;
        }
    </style>

2 body标签里面的

    <div style="background-color: blue ;height:200px;width: 200px"></div>

3 head标签里面的引入test.css文件

head标签下


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

test.css 为

div{
    background-color: green;
    height: 100px;
    width: 100px;
}

css选择器定义如何显示html 元素给html设置样式

选择器{属性:值;属性:值;}

基本选择器

元素选择器

id选择器 id为alex的变为绿色

类选择器类名为c1 的标签全部为绿色

组合选择器

后代选择器选择div标签下的所有的a 标签

儿子选择器 div儿子标签下的a标签

毗邻选择器紧挨着div标签下一个a 标签变红色

弟弟选择器

属性选择器

通过属性名来查找

含有title的div标签

含有type属性并且type属性值为text的input

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div[title]{
            color: green;
        }
        input[type="text"]{
            background-color: green;
        }
    </style>
</head>
<body>
    <input type="text"/>
    <input type="password"/>
<div title="xx">
    div1
</div>
<div>
    div2
</div>
</body>
</html>