美文网首页
HTML之CSS——初识CSS

HTML之CSS——初识CSS

作者: 思君_4cd3 | 来源:发表于2019-08-24 19:47 被阅读0次

更多关于CSS的相关知识可以访问如下网站:
https://www.w3school.com.cn/css/css_syntax.asp
https://www.runoob.com/css/css-intro.html

一.CSS简介

CSS:层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。
(百度百科)

  • 使用CSS的意义:
    CSS让网页变得更漂亮。

  • CSS的优势:
    1.内容与表现分离
    2.网页的表现统一,容易修改
    3.减少网页的代码量,增加网页的浏览速度,节省网络带宽

  • CSS的三种引用方式:
    1.行内样式
    2.内部样式
    3.外部样式

二.CSS语法

CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。


构成

选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。


结构
下面用一小段代码来解说一下:
代码

这个代码的作用是将 h1 元素内的文字颜色定义为红色,同时将字体大小设置为 14 像素。
在这个例子中,h1 是选择器,color 和 font-size 是属性,red 和 14px 是值。

  • 如果值为若干单词,则要给值加引号:
    p {font-family: "sans serif";}

  • CSS声明总是以分号(;)结束,声明总以大括号({})括起来:
    p {color:red;text-align:center;}

  • 注释:
    注释是用来解释你的代码,并且可以随意编辑它,浏览器会忽略它。
    CSS注释以 "/" 开始, 以 "/" 结束, 实例如下:

    注释
  • 设置字体颜色和字体大小的方式:


    第一种方式:行样式
    第二种方式:选择器
    结果
  • css层叠样式表:
    作用:用来美化渲染页面的

三.CSS选择器:

  • style标签
    ps:选择器必须写在style标签中,style标签写在head标签中
  • CSS中选择器分类:


    示例1

1.元素(标签)选择器
HTML标签作为标签选择器的名称
eg:<h1>…<h6>、<p>、<img/>
格式:
选择器{
属性名:属性值;
。。。
}


示例1.1

2.ID选择器
格式:
& #id选择器{
属性名:属性值;
。。。
}


示例

可以通过样式来改变标签属性值:


示例2
示例2.1
示例2.2
示例2.3

3.类选择器
.类选择器{
属性名:属性值;
。。。
}


示例1
示例2
结果1
将超链接置于中间
结果
(此文章仅作为个人学习笔记使用,如有错误欢迎指正~)

相关文章

  • HTML之CSS——初识CSS

    更多关于CSS的相关知识可以访问如下网站:https://www.w3school.com.cn/css/css_...

  • 前端入门系列

    前端HTML & CSS 基础入门(1)初识 前端HTML & CSS 基础入门(2)段落及文本 前端HTML &...

  • css 01

    css 初识 css 通常称为css样式或层叠样式表(级联样式),主要用于设置html页面中的文本内容(字体,大小...

  • 初识html,css

    作为一名计算机从业者,不说精通,但至少了解过C语言,C++,C#,C++,java,SQl,Javascript等...

  • 9/20 css课程笔记

    初识CSS 1.什么是CSS? CSS的名称叫做“层叠样式表”,说的直白点,就是改变HTML元素的样式,比如颜色、...

  • 前端知识之CSS内容

    前端基础之CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML...

  • 前端学习资料

    前端 Html+CSS+JS Web前端开发之HTML+CSS精英课堂【渡一教育】 Web前端开发之JavaScr...

  • 【CSS】按钮特效 - 3

    HTML代码 CSS代码 HTML代码 CSS代码 HTML代码 CSS代码 HTML代码 CSS代码 最后两个效...

  • 前端书单

    HTML 《Head First HTML与CSS》 CSS 《CSS揭秘》《CSS世界》 JS 《JavaScr...

  • css知识点

    1:初识css css全称为"层叠样式表",用来定义HTML内容在浏览器的显示样式。css3是将不同的功能拆分为独...

网友评论

      本文标题:HTML之CSS——初识CSS

      本文链接:https://www.haomeiwen.com/subject/ikxmjctx.html