CSS详解(一)

最新推荐文章于 2022-09-27 15:30:00 发布

gf_lvah

最新推荐文章于 2022-09-27 15:30:00 发布

阅读量328

点赞数

本文链接：https://blog.csdn.net/gf_lvah/article/details/77060005

版权

CSS介绍

CSS学习资料

CSS实例

rgb颜色对照表:
引入css：在每个标签上都可以引入style属性
background-color:
height:

hello fentiao

css的注释: /* */
编写css样式的方法
1). 在标签里面直接写style的相关属性;
2). 将style标签的样式写在head里面；
- id选择器;
i1{
```
background-color:red;
height:20px;
```
}
当标签需要css时应用方式:

hello fentiao

但是有一个bug，每个标签的id理论上不应该相同，所以该方法不常用;
- 类选择器(最常用)
  .i1{
  background-color:red;
  height:20px;
  }
当标签需要css时应用方式:

hello fentiao
- 标签选择器
  div {
  background-color:red;
  height:20px;
  }
对所有的div标签采用div里面的css样式。
- 关联(层级)选择器
  .c1 div {
  ….
  }
span div {
…
}

.c1 div a p {
…..
}
- 组合选择器:
i1, #i2, #i3 {
```
...
```
}

.c1, .c2, .c3 {
…
}
- 属性选择器:
  对选择到的标签再进行一次筛选;
  
  input[type=’text’]{
  width:100px;
  height:200px;
  }
```
input[n='westos']{
    width:100px;
    height:200px;
}
```
.c1[n=’westos’]{
width:100px;
height:200px;
}

3). 写在单独的文件中;

css优先级问题

标签上的style > 编写顺序(就近原则)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>westos</title>
    <style>
        .c1{
            background-color : red;
            color:white;
        }

        .c2{
            color:black;
            font-size:100px;
        }

    </style>
</head>
<html>
<body>
<div class="c1 c2" style="color:pink;">hello fentiao</div>

</body>
</html>

</body>
</html>

css独立

如果想要css样式不仅仅被现有网页中的标签或类应用，还可以被其他网页应用，实现方式:把css样式独立成一个文件.

css/my.css


.c1{
    background-color : red;
    color:white;
}

.c2{
    color:black;
    font-size:100px;
}

index.html网页需要调用时:

# 写在html页面中的head标签里面；
<link rel="stylesheet" href="css/mycss.css"/>
# 写在html的body标签里面，调用css样式;
<div class="c1 c2" style="color:pink;">hello fentiao</div>

边框:宽度样式(dotted solid double dashed) 颜色
- border

hello fentiao

常用的css样式属性:
height; 48px; # 高度,不能用百分比;
width:80%; # 宽度,可用像素和百分比显示;
border: 10px solid pink; # 边框
font-size:16px; # 字体大小;
text-align:center; # 水平方向居中;
line-height:48px; # 垂直方向居中,但要指定该标签的高度才生效;
font-weight:blod; # 字体加粗;

float:

默认情况下div是块标签，占一整行;
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

left 元素向左浮动。
right 元素向右浮动。
none 默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit 规定应该从父元素继承 float 属性的值。

父集级div管不住:

**示例:

<body>
<div style="width:20%; background-color:green; float:left;">hello</div>
<div style="width:70%; background-color:pink ; float:right;">fentiao</div>
</body>

display
定义和用法
display 属性规定元素应该生成的框的类型。
说明
这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型，如果使用 display 不谨慎会很危险，因为可能违反 HTML 中已经定义的显示层次结构。对于 XML，由于 XML 没有内置的这种层次结构，所有 display 是绝对必要的。

把块级标签转化为内联标签:

hello

把内联标签转化为块级标签:
hello world

设置某个内联标签,既有行内标签的属性也有块级标签的属性:
hello world

取消标签:
display:none;

*重点:
行内标签无法设置高度，宽度和边距(padding and margin);而块标签可以.

padding(内边距) margin(外边距)(0,auto):

text-align

height, width, line-height， color, font-size, font-weight,

CSS补充:
position
background
hover
overflow
z-index
opacity
示例:
输入框右边放置图标;

gf_lvah

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS详解(一)

CSS介绍CSS学习资料CSS实例rgb颜色对照表:引入css：在每个标签上都可以引入style属性 background-color: height:hello fentiaocss的注释: /* */编写css样式的方法 1). 在标签里面直接写style的相关属性; 2). 将style标签的样式写在head里面；id选择器;i1{background-color:red;
复制链接

扫一扫