介绍CSS

最新推荐文章于 2022-07-19 20:37:34 发布

鑫诚则灵besos

最新推荐文章于 2022-07-19 20:37:34 发布

阅读量109

点赞数

文章标签： css

本文链接：https://blog.csdn.net/hxiaolizhi/article/details/109519925

版权

介绍CSS

1.CSS
cascading style sheets 层叠样式表。它规定了Html标签在网页上的显示方式。

如何去使用css
`

<style><background-color:yellow;
    p{
      color: blue;
    }
  </style>
  `<body><h1>妖怪</h1>
 <p>妖怪，我要你助我修行。</p>
<p>红的花是绿的草</p>
<p >大威天龙</p>
</body>

基础语法：
选择器：
属性: 属性值;（声明）
属性: 属性值;

选择器：选择页面中哪些元素去做样式的修改。
声明：要做什么样的样式修改。

声明：都是由属性和属性值组成的。中间用：，以分号结尾。
css对缩进和空格不敏感，咱们可以通过合理的缩进来提高代码的可读性。
2.两者的优缺点
使用HTML写样式的痛点：
1.代码比较臃肿。
2.可读性比较差。
3.不便于维护。
4.对搜索引擎不友好，搜索引擎更关心内容。

使用css的优点：
1.代码比较简洁
2.可读性比较强
3.便于维护
4.更关心内容，对搜索引擎比较友好。
如何去使用css
基础语法：
选择器{
属性: 属性值;（声明）
属性: 属性值;
}
选择器：选择页面中哪些元素去做样式的修改。
声明：要做什么样的样式修改。

声明：都是由属性和属性值组成的。中间用：，以分号结尾。
css对缩进和空格不敏感，咱们可以通过合理的缩进来提高代码的可读性。

css分为五类：文本，盒子，浮动，定位，背景。

文本：
字体，大小，颜色。

盒子：宽，高，背景色，边框、

书写位置。

1.行内式，内嵌式，外链式，导入式。

使用style标签，在head标签内。
css属性写在style标签内。
缺点：
1.如果样式比较多，页面代码会比较多。
2.只对当前页面生效。如果说多个页面有共同的样式，需要写多次。
优点：
结构和样式分离。
样式可以复用。
 外链式 
写法：`<link rel="stylesheet" href="css/demo.css">`

通过link标签，引入外部的css文件。
优点：
结构和样式分离。
样式可以复用。
可以多个页面使用。
导入式。
写法：

<style>
   @import url(css/demo.css);
 </style>

外链式：会先加载css，再去加载HTML页面。
导入式：会先加载HTML页面，再加载css。

不推荐使用导入式，使用最多的是外链式。

CSS基础选择器

基础选择器的种类
1.标签选择器
2.ID选择器
3.类选择器

类选择器
通过标签的class属性来选择相应的标签。
class值是可以重复的。

格式：
.class属性值{
  声明;
}
类选择器选择的是拥有相同class属性的标签元素。

class属性是可以有多个的。命名规则与ID值是一样的。字母开头，后面跟 数字，下划线，横线。
css样式书写样式 最多的选择器就是类选择器。

4.通用符
可以选择包括body在内的所有标签。
现在不常用。因为效率不高。
有的标签没有相应的属性，有的标签有相应的属性，这个时候使用通配符，所有的标签都会去执行一次。

CSS体验

h1 {
      color:rgb(255,0,0);
      font-size: 48px;
      font-family: "Arial","Consolas","华文行楷";
      text-align: center;
    }

    p {
      color: blue;
      font-size: 24px;
      font-family: "SimSun","Mircosoft Yahei";
      text-align: center;
    }
    div{
      /* 宽 width
      ，高 height
      ，背景色 background-color
      ，边框 border 宽度，线的类型，颜色
      */
      width: 200px;
      height: 200px;
      background-color: pink;
      /* 中间是空格 */
      border: 10px solid gray;
    }