7.HMTL7

最新推荐文章于 2024-05-22 22:32:48 发布

简至大道

最新推荐文章于 2024-05-22 22:32:48 发布

阅读量64

点赞数 2

分类专栏：前端文章标签： html css javascript

又见面了，惊不惊喜，意不意外

本文链接：https://blog.csdn.net/zxyhj/article/details/119753982

版权

前端专栏收录该内容

19 篇文章 1 订阅

订阅专栏

1. CSS : cascading style sheet(层叠样式表)

HTML标签，指定元素， CSS让标签更美， javascript: 可动
能写在哪？？
- 外部引入 css文件用 link标签
- 内部样式：用style标签
- 内联样式：标签的style属性上

    <!-- 外部样式 -->
    <link type="text/css" rel="stylesheet" href="test1.css" />
    <style>
        /* 内部样式 */
        div:hover {
            width: 0px;height: 0px;border-width: 10px;border-style: solid;border-color: transparent transparent black    transparent ;
        }
        div {
            width: 0px;height: 0px;border-width: 10px;border-style: solid;border-color:black transparent transparent  transparent ;
        }
    </style>
</head>
<body>
    <div></div>
    <!-- 内联样式 -->
    <p style="color:red">hello world</p>
    <h1>hello world</h1>
</body>

2. 选择器：

	选择符{属性：属性值；属性：属性值；}

2.1 元素选择器;元素 {样式}；权重1

2.2 类选择器：class ；权重10

class定义用.
```
.abc {样式} .a2{样式}     
```
用的时候写在标签的class属性上
```
 <div class="abc a2"></div>
```

2.3 ID选择器： #id；权重100

定义是用#id
```
#a1 {样式}
```
使用的时候用id属性：
```
<div id="a1"
```

2.4 * 所有元素：基本不用

2.5. 空格表示父子关系（派生）

E F： F是E的子就可以

E>F: F是E的一级子元素

2.6. 逗号，并列的关系

    <style>
        div {
            color :red;
        }
        div > p, abc > p {
            color: green;
        }
    </style>
</head>
<body>
    
    <div>
        555
        <p>
            33
            <span>
                hello world
            </span>
            44
        </p>
        666
        <abc>
            dklfakl
            <p>hello world</p>
        </abc>
    </div>
</body>

2.7 + 同辈相邻的弟弟css3

        h1 + p{
            color:yellow;
        }
※ h1的同辈，且相邻，且弟弟

2.8 属性选择器用【】

[属性=值]：常用name选择器
[属性*=值]：包含值
[属性^=值]：以值开头
[属性$=值]：以值结尾

        [a2='a3'] {
            font-weight: bold;
        }
        /* 属性过滤name */
        [name='ename'],[name='empno'] {
            background-color: red;;
        }
        /* 包含3 */
        [a2*='3'] {
            font-size: 2em;
        }      
         /* 以a开头 */ 
        [a2^='a']  {
            color: blue;
        }
        /* 以4结尾的 */ 
        [a2$='4']  {
            border:1px solid black;
        }
        /* 空格split的包含 */
        [a2~='c5'] {
            font-style: italic;
        }

3 伪类：

3.1 ： nth系列：

first-child: 第一个子。如果不是第一个子就失效
nth-of-type(n); 第几个子元素
nth-of-child(n): 第几个子元素是

    <style>
        li:first-child {
            text-decoration: line-through;
        }
        li:last-child {
            text-indent: 4em;
        }
        div.a2:first-child {
            /* 不是第一个孩子无效 */
            color: red;
        }
        div.a2:nth-child(3) {
            /* 第几个是.a2的 */
            color: red;
        }
        div.a2:nth-of-type(3) {
            /* 第几个.a2 */
            color: green;
        }
    </style>

3.2：一堆

:link/ visited/ active/ before/after/ hover/

4. CSS样式：定位：

定位一般都是和left/right/top/bottom连用

fixed: 固定定位。广告跟着滚动条走。
- 文档流中清除位置。相对与整个窗体定位

简至大道

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
7.HMTL7

1. CSS : cascading style sheet(层叠样式表)HTML标签，指定元素， CSS让标签更美， javascript: 可动能写在哪？？外部引入 css文件用 link标签内部样式：用style标签内联样式：标签的style属性上  <link type="text/css" rel="stylesheet" href="test1.css" /> <style&g
复制链接

扫一扫