css基础

syj_111

已于 2024-07-10 15:25:52 修改

阅读量1k

点赞数 28

文章标签： css 前端 html

于 2024-02-19 19:20:50 首次发布

本文链接：https://blog.csdn.net/syj_111/article/details/136176624

版权

css基础

在这里插入图片描述

介绍：层叠样式表

作用：给页面中的HTML标签设置样式

写法：css写在style标签中，style标签一般写在head标签里面，title标签下面

属性：

color：文字颜色；
font-size：字体大小；
background-color：背景颜色；
width：宽度；
height：高度；

 <style>
        p{
            color: burlywood;
        }
.p2{
            /*背景颜色 */
            background-color: aqua;
        }
.p1{
    font-size: 30px;
}
 table{
            height: 200px;
            width: 500px;
            /* 合并边框 */
            /* 把原有的两条线变成一条 */
            /* border-collapse: collapse; */
            /* 不合并 */
            border-collapse: separate;
            /* 单元格间距 */
            border-spacing: 30px 50px;
            /* 表格标题位置 */
            caption-side: bottom;
            /* 隐藏空单元格 */
            empty-cells: hide;
        }
     </style>

css：引入方式：

内嵌式：css写在style标签中

外联式：css写在一个单独的.css文件中

行内式：css写在标签的style属性中

标签选择器：通过标签名，设置样式，如：p…

类选择器：

1.每个标签都有class属性，class属性的值叫做类名；

2.类名由：数字，字母，下划线，中划线组成，不能用数字开头；

3.一个标签可以有多个类名，类名中间用空格隔开；

4.一个类名可以在多个标签中使用；

5.类使用符号 . 来表示；

 <title>类选择器</title>
    <style>
        .p1{
            color: greenyellow;
        }
        .p2{
            /*背景颜色 */
            background-color: aqua;
        }
    </style>

id选择器：

1.每个标签都有id属性

2.每个标签只能有一个id

3.一个id只能对应一个标签

4.id选择器使用#代表

   <title>id选择器</title>
    <style>
        #p1{
            color: aquamarine;
        }
    </style>
</head>
<body>
    <p id="p1">
        1.每个标签都有id属性
        2.每个标签只能有一个id
        3.一个id只能对应一个标签
        4.id选择器使用#代表
    </p>
</body>
</html>

通配符

通配符：选择所有标签（极少使用）

字体样式：

1.字体大小：font-size；
2.字体粗细：font-wight；
3.字体样式：font-style；
4.字体类型：font-fomily;
5.字体类型：font属性连写

  <title>字体样式</title>
    <link rel="stylesheet" href="css/font.css">
</head>
<body>
    <p>字体样式</p>
    <p class="p1">1.font-size 字体大小</p>
    <p class="p2">
        2.font-weight字体宽度
        取值：normal正常  bold 加粗  bloder 更粗
        100~900
    <p class="p3">
        3.font-style 字体样式（是否倾斜）<br>
        normal正常 italic倾斜

    </p>
    <p class="p4">
        4.font-family  字体系列
    </p>
    <p class="p5">
        5.简写（符合属性，连写）：倾斜 加粗 大小 系列
    </p>

文本样式:

1.文本缩进：text-indent；
2.文本水平对齐方式：text-align；
3.文本修饰：text-decoration；

 <title>文本样式</title>
    <link rel="stylesheet" href="css/text.css">
</head>

<body>
    <p id="p1">
        HTML 标签原本被设计为用于定义文档内容。通过使用这样的标签，HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局由浏览器来完成，而不使用任何的格式化标签。

        由于两种主要的浏览器 <span class="s1">（Netscape 和 Internet Explorer）</span>不断地将新的 HTML 标签和属性（比如字体标签和颜色属性）添加到 HTML 规范中，创建文档内容清晰地独立于文档表现层的站点变得越来越困难。

        为了解决这个问题，万维网联盟（W3C），这个非营利的标准化联盟，肩负起了 HTML 标准化的使命，并在 HTML 4.0 之外创造出样式（Style）。

        所有的主流浏览器均支持层叠样式表。

    </p>

line-height行高；

复合选择器：

后代选择器：空格；
子代选择器：>;
并集选择器：，；
交集选择器：紧挨着；
hover伪类选择器（选中鼠标在元素上的状态，设置样式）
emmet语法：通过简写语法，快速生成代码；（下图·）

 <title>并集选择器</title>
    <style>
        /* li红色 li2,li3黄色 */
        .li1{
            color: red;
        }
        .li2,.li3{
            color: yellow;
        }
        .p1,.li2 p{
            font-size: 30px;
        }
        ul p,
        ul span{
            color: hotpink;
        }
    </style>
</head>
<body>
    <p class="p1">并集选择器 </p>
    <ul>
        <li class="li1">并集选择器中的每组选择器之间通过 , 分隔</li>
          <li class="li2"><p class="p2">并集选择器中的每组选择器可以是基础选择器或者复合选择器</p>
        <span>asdefjw</span></li>
          <li class="li3"> 并集选择器中的每组选择器通常一行写一个，提高代码的可读性 
            <span>Hefowq</span>
          </li>
    </ul>
    <span>hefpief</span>

在这里插入图片描述

背景：

1.背景颜色：

属性名：backgrund-color

2.背景图片：

属性名：background-image

3.背景平铺：

属性名：backgrund-repeat

4.背景位置：

属性名：backgrund-position

元素显示：

1.块级元素：

1.独占一行
2.宽度默认是父元素的宽度，高度默认由内容撑开
3.可以设置宽高

  <title>元素显示模式</title>
<style>
    a{
        /* 变块 */
        display: block;
        height: 100px;
        width: 200px;
        background-color: aqua;
    }
    p{
        /* 变行内 */
        display: inline;
        background-color: blueviolet;
    }
    .img1{
        /* 隐藏 */
        display: none;
    }
    .d1{
        height: 300px;
        background-color: blanchedalmond;
    }
    .d1:hover .img3{
        display: none;
  }
  </style>
</head>