标签：初体验 color 元素 haha css 选择器 CSS 样式表
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文件中进行了文本居中、改变背景颜色等操作，外部样式表将html文件和css文件分开，浏览方便，也便于修改。
而涉及样式的优先级问题时，从高到低分别是：
内联样式
内部样式表或外部样式表
浏览器缺省样式
也可以理解为哪个样式离元素近则优先。
四、常用的美化
下面将对颜色、尺寸和文本对齐进行实践，对css进行更深入的理解
颜色
一个浏览器的背景色和字体色是有搭配讲究的，如何看起舒服是有学问的，我们主要了解使用方法
我们可以采用颜色名称也可以使用颜色RGB16进制值，来设定前景或背景的颜色，我感觉颜色名称更方便，主要看个人习惯。
下面是具体例子
效果如下：
尺寸
尺寸也是很重要的
我们可以用 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;
}
效果如下:
对齐
目前对于元素中的文本，我们可以简单的设置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;
}
效果如下：
六、定位
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;
}
网站效果：
可以看出相对定位的位置是依靠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);
}
效果如下：
可以看出该例子绝对定位的参考对象是父元素而不是屏幕
七、溢出
溢出属性有一下几个值：
visible 默认值，溢出部分不被裁剪，在区域外面显示
hidden 裁剪溢出部分且不可见
scroll裁剪溢出部分，但提供上下和左右滚动条供显示
auto 裁剪溢出部分，视情况提供滚动条
在html下随便输入一长串英文，在css下输入下面代码：
.example-overflow-scroll-y {
width: 200px;
height: 100px;
background-color: #eee;
overflow-y: scroll;
}
效果如下：
在上面的代码中使用了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>
效果如下：
其中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>
效果如下：
其中 border-radius表示图片为圆角边框，排列为左浮动，而如果不想在同一排显示，可以在后面加上clear：both；
效果如下：
十、组合选择器
后代选择器：
用法为以空格作为分隔
代码如下：
<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>
效果如下：
通过分析可以看出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>
效果如下：
通过分析可以看出第三段的父元素为span，不是.haha的直接后代，所以第三段没有变色
总结
经过这次实践，让我对css的语法和使用有了初步的了解，css的用法很多，想要记住需要多实践，css的主要用途是对显示内容进行加工，使之更加美化或改善用户体验，所以css涉及的知识面非常广。css上手简单，但想要熟练的使用却不容易，不仅仅是语法格式，还有命令的名称很多，通过HTML和CSS的学习，现在我所能建立的网页已经比开始好多了，不仅有颜色的搭配，还有图片的排版。希望通过后面的学习构建更完整的网站。
标签：初体验,color,元素,haha,css,选择器,CSS,样式表 来源： https://blog.csdn.net/uvyou/article/details/115124731
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。