CSS笔记1.1

最新推荐文章于 2024-10-25 17:02:44 发布

Recover、

最新推荐文章于 2024-10-25 17:02:44 发布

阅读量721

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/m0_61785904/article/details/122686679

版权

CSS

文章目录

1.1

CSS(cascading style sheet)：层叠样式表

主流浏览器及其内核

1.IE trident
2.Firefox Gecko
3.Google chrome Webkit/blink
4.Safari Webkit
5.Opera presto

引入CSS

1.行间样式

<div style="..."></div>

2.页面级CSS

<head>
    <style type="text/css">
        div{...}
    </style>
</head>

3.外部CSS文件

<head>
<link rel="stylesheet" type="text/css" href="xxx.css">
</head>
<body> 
    <div></div>
</body>

xxx.css     //新文件css后缀
div{...}

选择器

1.id选择器

<head>
<link rel="stylesheet" type="text/css" href="xxx.css">
</head>
<body> 
    <div id="only">...</div>
</body>

xxx.css
#only{
    ...
}

一个元素只能有一个id值

2.class选择器

<head>
<link rel="stylesheet" type="text/css" href="xxx.css">
</head>
<body> 
    <div class="demo demo1">...</div>
    <div class="demo">...</div>
</body>

xxx.css
.demo{
    ...
}
.demo1{
    ...
}

class可以被多个元素调用

3.标签选择器

<head>
<link rel="stylesheet" type="text/css" href="xxx.css">
</head>
<body> 
    <div>...</div>
</body>

xxx.css
div{
    ...
}

无论是否被何元素嵌套都可以实现选择

4.通配符选择器

<head>
<link rel="stylesheet" type="text/css" href="xxx.css">
</head>
<body> 
    <div>...</div>
</body>

xxx.css
* {

}

*代表任意的，所有元素都被选择

5.属性选择器*

```html
<head>
<link rel="stylesheet" type="text/css" href="xxx.css">
</head>
<body> 
    <div>...</div>
</body>

xxx.css
[...]{
    //[]里中可以写入id，class选择所有id或class，也可以写入id="..."，class="..."来指向特定元素
}