Java学习日记（day16）

最新推荐文章于 2024-09-16 21:37:07 发布

肆氿

最新推荐文章于 2024-09-16 21:37:07 发布

阅读量874

点赞数 26

文章标签： java 学习开发语言

本文链接：https://blog.csdn.net/qq_59031302/article/details/140999308

版权

一、CSS定义和基本选择器

CSS定义：cascading style sheet 层叠样式表。

语法：

选择器 {

属性名1:属性值1;

属性名2:属性值2;

属性名3:属性值3;

属性名4:属性值4;

}

CSS使用：

通过选择器选择上标签
在选择的标签上设置样式

选择器分类：

标签选择器： p{}
类选择器： .className{}
id选择器： #id{}

一些常见的样式：

color:red; 文字颜色

font-size:40px;

background-color:blue;

text-decoration:underline;

text-decoration:none; //去掉下划线

二、CSS使用思想

一共有三种样式：50px字体、红色、下划线

正确的思路，就是用所谓“公共类”的思路，就是我们类就是提供“公共服务”，比如有红、大、线，一旦携带这个类名，就有相应的样式变化。

总结：

1）不要去试图用一个类名，把某个标签的所有样式写完。这个标签要多携带几个类，共同造成这个标签的样式。
2）每一个类要尽可能小，有“公共”的概念，能够让更多的标签使用。

<!DOCTYPE html>
<html>
    <head>
       <meta charset="utf-8">
       <title></title>
       <style>
          .big-font{
             font-size: 50px;
          }
          .red{
             color: red;
          }
          .underline{
             text-decoration: underline;
          }
       </style>
    </head>
    <body>
       <p class="red big-font">段落1</p>
       <p class="red underline">段落2</p>
       <p class="big-font underline">段落3</p>
       <p class="big-font red underline">段落4</p>
    </body>
</html>

三、CSS高级选择器

s1 s2 后代选择器

s1,s2 并集选择器(选择器组) ||

属性选择器

s1s2 交集选择器（既满足选择器1也满足选择器2） &&

s1>s2 直接儿子选择器，和后代选择器不一样

s1+s2 下一个兄弟选择器,后面紧挨着的第一个兄弟

四、盒模型

盒子中主要的属性就5个：width、height、padding、border、margin。

padding:内边距 margin：外边距

盒模型的示意图：

div+css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            border: 2px solid blue;
            padding: 10px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>