首页 / CSS / CSS初体验

CSS初体验

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了CSS初体验，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含8113字，纯文字阅读大概需要12分钟。

内容图文

CSS初体验

一、何为CSS

CSS是级联样式表（Cascading Style Sheets）的缩写。HTML 用于撰写页面的内容，而 CSS 将决定这些内容该如何在屏幕上呈现。
因此CSS能够将页面的内容进行美化，给浏览者更好的视觉感受和体验

二、选择器

选择器中分为id选择器和class选择器，下面将分别进行实践

id选择器

id选择器的使用要在id前加上#，后面的语句就是对该id所定义的元素进行修改
如

#sky{
  color: blue;
}

是找到id为sky的将颜色改为蓝色，所以id选择器只能适用于一个元素

class选择器

而class选择器是对一类元素进行统一操作，适用范围广
如下面语句

.center{
  text-align: center;
}

在使用前要加上.，对center类的元素进行文本居中操作。因此class选择器应用得更广泛。

三、CSS的应用

CSS的生效有三种方式：外部样式表，内部样式表，内联样式，其中外部样式表应用得广泛些，所以下面对外部样式表进行实践。

外部样式表

先创建html文件

<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="1.css">
  <title>龙门客栈</title>
</head>
<body>
  <h1>欢迎来到</h1>
  <hr>
  <p class="haha">还是有点丑：)</p>
</body>
</html>

在该目录下创建后缀名为.css的文件，输入下面代码

body {
    background-color: linen;
    text-align: center;
  }
  h1 {
    color: red;
  }
  .haha {
    margin-top: 100px;
    color: chocolate;
    font-size: 50px;
  }

效果如下：
CSS初体验 - 文章图片
可以看出在css文件中进行了文本居中、改变背景颜色等操作，外部样式表将html文件和css文件分开，浏览方便，也便于修改。

而涉及样式的优先级问题时，从高到低分别是：
内联样式
内部样式表或外部样式表
浏览器缺省样式
也可以理解为哪个样式离元素近则优先。

四、常用的美化

下面将对颜色、尺寸和文本对齐进行实践，对css进行更深入的理解

颜色

一个浏览器的背景色和字体色是有搭配讲究的，如何看起舒服是有学问的，我们主要了解使用方法

我们可以采用颜色名称也可以使用颜色RGB16进制值，来设定前景或背景的颜色，我感觉颜色名称更方便，主要看个人习惯。
下面是具体例子
CSS初体验 - 文章图片
效果如下：
CSS初体验 - 文章图片

尺寸

尺寸也是很重要的
我们可以用 height 和 width 设定元素内容占据的尺寸。常见的尺寸单位有：像数 px，百分比 %等。
代码如下

<body>
  <div class="example-1">
    这个元素高 200 pixels，占据全部宽度
  </div>
  <div class="example-2">
    这个元素宽200像素,高300像素
  </div>

这是使用的class选择器
css文件如下：

.example-1 {
    width: 100%;
    height: 200px;
    background-color: powderblue;
    text-align: center;
  }
  .example-2 {
    height: 100px;
    width: 500px;
    background-color: rgb(73, 138, 60);
    text-align: right;
  }

效果如下:
CSS初体验 - 文章图片

对齐

目前对于元素中的文本，我们可以简单的设置text-align属性为left, center, right即可（显然缺省的是左对齐），更深奥的在后面进行实践

五、盒子模型

接下来是概念的理解，方便以后的布局，盒子模型从内到外，是由内容 content, 内边距 padding, 边框 border, 外边距 margin构成的

说明：

Content 盒子的内容，如文本、图片等
Padding 填充，也叫内边距，即内容和边框之间的区域
Border 边框，默认不显示
Margin 外边距，边框以外与其它元素的区域

在html中输入下列代码：

<html>
  <head>
    <link rel="stylesheet" href="./mycss.css">
  </head>
  <body>
    <div class="box1">我是内容一，外面红色的是我的边框。注意边框的内外都有25px的距离。</div>
    <div class="box2">我是内容二，外面蓝色的是我的边框。注意与上面元素的外边距，发生了叠加，不是50px而是25px。</div>
  </body>
</html>

css中输入下列代码：

.box1 {
    height: 200px;
    width: 200px;
    background-color:#615200;
    color: aliceblue;
    border: 10px solid red;
    padding: 25px;
    margin: 25px;
  }
  .box2 {
    height: 300px;
    width: 300px;
    background-color:#004d61;
    color: aliceblue;
    border: 10px solid blue;
    padding: 25px;
    margin: 25px;
  }

效果如下：
CSS初体验 - 文章图片

六、定位

position属性用于对元素进行定位。
该属性有以下一些值：
static 静态
relative 相对
fixed 固定
absolute 绝对

需要注意的是设置了元素的position属性后，我们才能使用top, bottom, left, right属性，否则定位无效

static

设置的语法为position: static;，该语句为静态定位，从左到右，从上到下进行文字的显示

relative

设置的语法为position: relative;，该语句为相对定位，将相对于静态位置进行偏移
在html中输入下面语句：

<p class="example">这是静态位置</p>  
  <p class="example1">这是相对位置</p>

在css中输入下面语句：

.example {
 position: static;}
  .example1 {
    position: relative;
  left: 60px;
  top: 40px; 
}

网站效果：
CSS初体验 - 文章图片
可以看出相对定位的位置是依靠left、top等语句进行定位的，如果不加则跟静态定位位置一样

fixed

设置语法为position: fixed;，该语句为固定定位，此时元素固定的位置仍由top, bottom, left, right属性确定，但相对的是视口（viewport，就是浏览器的屏幕可见区域）

absolute

设置语法为position: absolute;，将使元素相对于其最近设置了定位属性（非static）的父元素进行偏移。
如果该元素的所有父元素都没有设置定位属性，那么就相对于< body >这个父元素。通过解释可以看出绝对定位是相对于父元素的位置。
输入下面代码：

<div class="example-relative">这是父元素，有 relative 定位属性
  <div class="example-absolute">
    这是子元素，有 absolute 定位属性
  </div>
</div>

css代码：

.example-relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid rgb(87, 33, 173);
}
.example-absolute {
  position: absolute;
  right: 5px;
  width: 200px;
  height: 100px;
  border: 3px solid rgb(218, 73, 16);
}

效果如下：
CSS初体验 - 文章图片

可以看出该例子绝对定位的参考对象是父元素而不是屏幕

七、溢出

溢出属性有一下几个值：

visible 默认值，溢出部分不被裁剪，在区域外面显示
hidden 裁剪溢出部分且不可见
scroll裁剪溢出部分，但提供上下和左右滚动条供显示
auto 裁剪溢出部分，视情况提供滚动条

在html下随便输入一长串英文，在css下输入下面代码：

.example-overflow-scroll-y {
    width: 200px;
    height: 100px;
    background-color: #eee;
    overflow-y: scroll;
  }

效果如下：
CSS初体验 - 文章图片
在上面的代码中使用了scroll，提供了滚动条，其中overflow-y表示提供上下的滚动条，改为x则为左右的滚动条。

八、浮动

在一个区域或容器内，我们可以设置float属性让某元素水平方向上向左或右进行移动，其周围的元素也会重新排列。
我们常用这种样式来使图像和文本进行合理布局
在html中输入下面代码：

<html>
<head>
  <style>
    .example-float-right {
      float: right;
    }
  </style>
</head>
<body>
  <img src="https://mdbootstrap.com/img/Photos/Others/placeholder1.jpg" class="example-float-right" alt="">
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quidem, architecto officiis, repellendus
  corporis obcaecati, et commodi quam vitae vel laudantium omnis incidunt repellat qui eveniet fugiat totam
  modi nam vero!</p>
</body>
</html>

效果如下：
CSS初体验 - 文章图片
其中float：right是指右浮动，左浮动为left，图片则靠左

九、不透明度

我们可以用opacity对任何元素（常用于图片）设置不透明度。
值在[0.0～1.0]之间，值越低，透明度越高
下面为例子：

<html>
<head>
  <style>
    img {
      width: 25%;
      border-radius: 10px;
      float: left;
      margin: 10px;
    }
    .opacity-2 {
      opacity: 0.2;
    }
    .opacity-5 {
      opacity: 0.5;
    }
    .opacity-10 {
      opacity: 1;
    }
  </style>
</head>
<body>
  <img class="opacity-2" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(87).jpg">
  <img class="opacity-5" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(87).jpg">
  <img class="opacity-10" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(87).jpg">
</body>
</html>

效果如下：
CSS初体验 - 文章图片
其中 border-radius表示图片为圆角边框，排列为左浮动，而如果不想在同一排显示，可以在后面加上clear：both；
CSS初体验 - 文章图片
效果如下：
CSS初体验 - 文章图片

十、组合选择器

后代选择器：

用法为以空格作为分隔
代码如下：

<html>
<head>
  <style>
    .haha p {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div class="haha">
    <p>Paragraph 1 in the div .haha.</p>
    <p>Paragraph 2 in the div .haha>.</p>
    <span>
        <p>Paragraph 3 in the div .haha.</p>
    </span>
  </div>
  <p>Paragraph 4. Not in a div .haha.</p>
  <p>Paragraph 5. Not in a div .haha.</p>
</body>
</html>

效果如下：
CSS初体验 - 文章图片
通过分析可以看出div中的所有元素背景都为黄色。

子选择器

用法为以 > 作为分隔
代码如下：

<html>
<head>
  <style>
    .haha > p {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div class="haha">
    <p>Paragraph 1 in the div .haha.</p>
    <p>Paragraph 2 in the div .haha.</p>
    <span>
        <p>Paragraph 3 in the div .haha - it is descendant but not immediate child.</p>
    </span> <!-- not Child but Descendant -->
  </div>
  <p>Paragraph 4. Not in a div .haha.</p>
  <p>Paragraph 5. Not in a div .haha.</p>
</body>
</html>

效果如下：
CSS初体验 - 文章图片
通过分析可以看出第三段的父元素为span，不是.haha的直接后代，所以第三段没有变色

总结

经过这次实践，让我对css的语法和使用有了初步的了解，css的用法很多，想要记住需要多实践，css的主要用途是对显示内容进行加工，使之更加美化或改善用户体验，所以css涉及的知识面非常广。css上手简单，但想要熟练的使用却不容易，不仅仅是语法格式，还有命令的名称很多，通过HTML和CSS的学习，现在我所能建立的网页已经比开始好多了，不仅有颜色的搭配，还有图片的排版。希望通过后面的学习构建更完整的网站。

内容总结

以上是互联网集市为您收集整理的CSS初体验全部内容，希望文章能够帮你解决CSS初体验所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1041553.html

来源：【匿名】