css 基础入门

Posted kaichenkai

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css 基础入门相关的知识,希望对你有一定的参考价值。

CSS 概述

为了让网页元素的样式更加丰富,也为了让网页的内容和样式能拆分开,css 由此而生,css 是 Cascading Style Sheets 的字母缩写,意思是层叠样式表,有了 css,html 中大部分表现样式的标签就废弃不用了,html 只负责文档的结构和内容,表现形式完全交给 css

 

css 基本语法

css 的定义方法是:

选择器是将样式和页面元素关联起来的名称,属性是希望设置的样式,每个属性有一个或多个值,属性和值之间以键值对的形式存在

选择器属性:; 属性:; 属性:;

div 
    width:100px; 
    height:100px; 
    background:gold; 

 

css 的引入方式(3种)

1)内联式

通过标签的 style 属性,在标签上直接写样式

<div style="width:100px; height:100px; background: blue;">div tag</div>

 

2)嵌入式

通过 style 标签,在网页上创建嵌入的样式表

<style type="text/css">
        div width:100px; height:100px; background: blue;
        ......
</style>

 

3)外链式(推荐使用

通过 link 标签,链接外部样式文件到页面中

<link rel="stylesheet" type="text/css" href="css/main.css">

 

css 选择器

1)标签选择器

标签选择器的影响范围大,一般用来做一些通用设置,或用在层级选择器中

demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style type="text/css">
    div
        width: 100px;
        height: 100px;
        background: red;
    
</style>
<body>
    <div>one div tag</div>
    <div>two div tag</div>
    <div>three div tag</div>
</body>
</html>

 

2)类选择器

通过类名称来选择元素,一个类可应用于多个元素,一个元素上也可以使用多个类,应用灵活,可复用,是 css 中应用的最多的一种选择器

demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style type="text/css">
    .box-size
        width: 100px;
        height: 100px;
    

    .box-color
        background: blue;
    

    .box-font-size
        font-size: 20px;
    
</style>
<body>
<div class="box-size">one div tag</div>
<div class="box-color">one div tag</div>
<div class="box-font-size">one div tag</div>
</body>
</html>

 

效果展示:

技术图片

 

3)层级选择器

主要应用在标签嵌套的结构中,层级选择器,是结合上面的两种选择器来写的选择器,它可与标签选择器结合使用,减少命名,同时也可以通过层级,限制样式的作用范围

demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .con
        width: 200px;
        height: 100px;
        background: green;
    

    .con spancolor: red;

    .con .pinkcolor: pink

    .con .goldcolor: gold;
</style>
<body>
    <div class="con">
        <span>span tag</span>
        <a href="#", class="pink">a tag</a>
        <a href="#", class="gold">a tag</a>
    </div>
</body>
</html>

效果展示:

技术图片

 

以上是关于css 基础入门的主要内容,如果未能解决你的问题,请参考以下文章

前端基础CSS 入门

css 基础入门

零基础入门前端系列—CSS介绍

网页设计基础入门——HTML5和CSS

CSS是什么?一篇文章全解,带你零基础入门前端CSS

CSS基础篇之入门介绍及语法应用