css基础选择器

enctype：编码类型。hidden：对元素进行隐藏。file：上传文件

<form action=""method="post"enctype="multipart/form-data">
    <p hidden="hidden">这是隐藏的字段</p>
    <input type="file"name="updown"id="file">
</form>
</body>

readonly：只读。disabled：禁用一个input元素

<input type="text"name="username"id="username"readonly>
<input type="text"name="username"id="username"disabled>

块级元素和行内元素

元素	标签
块级元素	h1 p ul li table
行内元素	a img input

4. css样式：宽度，高度，背景色，文字颜色、大小、字体，边框（颜色，粗细，样式）
三类选择器

选择器	样式
标签选择器	以标签名开头，所有这个标签都会用到这个样式
类选择器	以.开头，用到时需声明class
id选择器	以#和id组成，这个id会被应用

三种样式

样式	用法
外部样式	在css文件中写，用link调用
内部样式	直接在head里写
行内样式	在标签内部用style写

三种高级选择器

选择器	用法
子选择器	用空格隔开，后者在前者内部
交集选择器	第一个是标签，第二个是类或者id
并集选择器	用逗号隔开，同级关系

5. 继承
设置一个标签样式和一个类样式，可以继承标签样式的属性

div{
        width: 200px;
        height: 100px;
    }
 .div1-css{
        background-color: red;
        color: white;
    }
<body>
<div class="div1-css">继承</div>
</body>

利用空格可以使用多个样式

<button class="btn-warn btn-lg">button</button>

权重
id选择器的权重是100，类选择器的权重是10，标签选择器的权重是1
权重越大，优先级越高
css属性

属性	作用
width	宽度
height	高度
background	设置背景
font-size	字体大小
font-family	字体样式，sans-serif默认样式
color	前景色
text-align	行内元素的水平位置
cursor	光标样式，pointer手，help问好
text-decoration	下划线，none为不设置下划线
line-height	行高
display	改变属性，table-cell变为单元格
vertical-align	表格文本位置

6. 伪类
设置链接的伪类

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a{
            text-decoration: none;
        }
        a:link{
            width: 120px;
            height: 20px;
            background-color: lightslategray;
            color: blue;
        }
        /*访问过的连接*/
        a:visited{
            color: lightgray;
        }
        /*鼠标悬浮时*/
        a:hover{
            color: black;
        }
        /*按住不放的*/
        a:active{
            color: red;
        }
    </style>
</head>
<body>
<a href="www.baidu.com">百度</a>
</body>
</html>

css基础 选择器

猜你喜欢