CSS的常用属性

最新推荐文章于 2025-05-28 17:51:49 发布

DaiQuan2206

最新推荐文章于 2025-05-28 17:51:49 发布

阅读量390

点赞数

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

本文链接：https://blog.youkuaiyun.com/qq_45935397/article/details/122214636

版权

HTML 专栏收录该内容

6 篇文章

订阅专栏

对网页进行美化的工具

css代码语法格式
- css代码和html代码结合的方式
  - 1:直接将样式代码写到style代码中;
  - <p style ="font-size:30;color:red;">一段</p>
    - 样式的编写语法样式名:样式值;样式名:样式值;

以上这种样式的应用方式称为“行内样式”，行内样式存在的问题：将样式和标签内容耦合在一起，没有办法实现样式代码的复用

将样式代码和html标签分开编写，在html中提供了一个专门的标签 style来在当前页面中嵌入css样式代码，这种方式我们称为“内部样式”

这种方式需要结合CSS中提供的选择器一起使用

实现了网页内容和网页样式的分离,好处是可以实现样式代码在多个不同的标签上进行复用，后期的维护也变得比较方便

<head> 
    <style>
        h1,p,li{font-size:30px;color:blue;}  
//将定义的样式应用到当前页面的h1  p  li上
      </style>
 </head>

内部样式可以实现一定程度的复用，但是没有办法实现跨页面复用

2.让css代码复用
- 内部样式:结合css中的选择器一起使用
- <style></style> 写在head里面
- 不能跨页面复用
3.整个项目复用:将样式代码单独设计到一个.css文件中
在页面中用link 引用在head中 <link href="style.css " rel="stylesheet" type = "text/css">
css称为外部样式

css选择器:提供了三种基本选择器

用标签名选择
类选择器:为指定的元素或者目标添加class属性,然后在css中使用. 一个标签可以同时设置多个类名 class="aaa bbb" 中间使用空格分隔
一个标签只能设置一个class 用两个属性:
id选择器给元素指定一个样式: id="third" :用法: (不推荐id选择器;id一般给javascript使用)
组合选择器:
- - 组合选择器：选择器1,选择器2,选择器3{样式代码}
- 子元素选择: 父元素选择器>子元素选择器
  
  .u2>li li就是u2的子元素
  
  直接相关的元素叫子元素
  
  后代元素选择器包含子元素 .后代元素选择：先辈元素选择器后代元素选择器
常用样式属性
- 文本样式属性：用来设置网页上文字的样式，不管这个文本在哪个标签中
  - font-size:设置文本字体大小单位为px 像素
  - color设置文本颜色英文单词; rgb ;#六位16进制;
  - text-align:设置文本水平对齐方式 left center right
  - text-decoration:设置文本的装饰线取值：underline none (去除) 我们学习这个属性的目的不是为了给文本加装饰线而是为了去除a标签的划线
- DIV盒子
- 背景属性
- : background-image :设置背景图片;若是图片小,则会多个图片填充满
- 设置图片平铺:background-repeat -x :横向铺满 -y纵向铺满
  - no-repeat 不平铺
  - background-position:设置背景偏移量每个元素都有自己独立的坐标系，坐标原点在左上角往右为x轴正方向往下为y轴正方向
  - 简写的方式:
  - - 第一个123在图片内第二个123在图片外
- 块元素：特点：a.独霸一行 b.宽高有效 h1 p hr div ul li ol dl dt dd ....块元素默认（在没有设置宽高的情况下）和父元素同宽和内容同高
- .行内元素：特点：a.允许多个元素同行显示(在父元素宽度足够的情况下) b.宽高无效 a span input select textarea ... 行内元素在没有设置宽高的情况下和内容同宽同高
- 行内块元素:同时具有行内和块的特征; 允许同行宽高有效 img
- 在css中提供了改变元素的显示方式的属性
- 在CSS中提供了改变元素的显示方式的属性：
  
  display: 四个取值
  
  block:以块元素方式展示
  
  inline：以行内元素方式展示
  
  inline-block:以行内块元素的方式展示
  
  none:设置元素不显示
  
  元素不显示的另一种控制方式： visibility 两个取值: visible 可见 hidden 隐藏和display:none;不同元素隐藏后原来所占的空间不会释放