CSS基本使用

简介: CSS基本使用

CSS基本概念

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)

等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

1.什么是CSS

      CSS(cascading style sheet)层叠样式表,主要用于布局和美化网页  

如下图:


 

2.CSS分类

                内部样式表和外部样式表

  内部样式表又分为嵌入样式和行内样式


                嵌入样式:


           主要包含:<head></head>


                    <head>


                                <style  type="text /css">

    bady{font-size:12px;}


                      </style>


                 </head>


  行内样式


      <a style="tont-size:12px:">


外部样式包含在<head></head>中


                        CSS作为一个独立文件被调用


<link       hred="style.css"   rel=“stylesheet”  type=“text/css”/>


3.CSS的语法结构

<style   type ="text/css">

               选择器:[对象属性:属性值:]

</style>

4.CSS选择器的分类

    标签选择器   p    a        body        span        stab/e

p\    p{属性:属性值:}

类选择器,类名

类名[属性:属性值:]

     <p class="类名">

  id选择器

        #id1名字{属性:属性值:}

       <p    id ="id名字">

5.css样式的优先级

     id选择器>类选择器>标签选择器.

选择器相同,按代码的应用顺序,后应用的覆盖前应用

     行内样式>嵌入样式>外部样式

     内层标签应用样式优先于外层样式标签


6.选择器的申明

             集体申明

body,p,hl,span,#abc,classl{color:red:}


嵌套申明                


         p      a         {color:red:}


         p      a         span{color  :red:}

7.css       常见的文本段落属性

font-family                        设置文本字体

font-sis                             设置字体大小

line-height                             文本的行高


texr-indent                         首行缩进


text-align                      文本的水平对齐方式


vertical-align                    垂直对齐方式


color                          字体颜色


border                                设置边框属性


border-width                               边框宽度


border-style                            边框样式


border-color                              边框的颜色


backlground-image                            设置背景图片




相关文章
html+css实战162-圆角边框-基本使用
html+css实战162-圆角边框-基本使用
140 0
html+css实战162-圆角边框-基本使用
html+css实战32-input基本使用
html+css实战32-input基本使用
209 0
html+css实战32-input基本使用
html+css实战13-图片基本使用
html+css实战13-图片基本使用
215 0
html+css实战13-图片基本使用
|
前端开发
css中定位和背景的基本使用方式
通过本章认识css中定位和背景的基本使用方式。
235 0
|
前端开发
CSS伪元素的基本使用
CSS伪元素的基本使用
165 0
|
前端开发
前端基础:CSS伪类的作用和基本使用
前端基础:CSS伪类的作用和基本使用
252 0
|
Web App开发 前端开发
HTML/CSS的基本使用
  本篇博客主要介绍一下HTML/CSS的基本使用,关于它们的介绍便不在赘述,读者可自行google或百度。 一、HTML   先来简单介绍一下HTML标签:     HTML 标签是由尖括号包围的关键词,比如     HTML 标签通常是成对出现的,比如 和     标签对中的第一个标签是开始标签,第二个标签是结束标签     开始和结束标签也被称为开放标签和闭合标签   首先在写每个HTML的文档之前需要一个基本模板,一般的HTML编辑器都会自动生成。
1363 0
|
5月前
|
存储 自然语言处理 前端开发
抖音快手小红书虚拟评论截图生成器,模拟对话制作工具,html+js+css
这是一款纯前端实现的多平台虚拟评论生成器,支持抖音、快手、小红书风格,适用于产品演示与UI设计。采用Vanilla JS与Flexbox布局,利用IndexedDB存储数据,CSS Variables切换主题。
|
5月前
|
存储 前端开发 安全
病历单生成器在线制作,病历单生成器app,HTML+CSS+JS恶搞工具
本项目为医疗病历模拟生成器,旨在为医学教学和软件开发测试提供数据支持,严格遵守《医疗机构病历管理规定》。
|
5月前
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中
下一篇
oss云网关配置