CSS介绍

神经网络巫师
• 阅读 156
  • CSS简介
  • CSS基础选择器
  • CSS字体属性
  • CSS文本属性
  • CSS的引入方式

CSS简介

CSS是层叠样式表(Cascading Style Sheets)的简称。

作用:

  • 用于HTML文档中元素的样式定义
  • 实现内容(html元素)与表现(css样式)的分离
  • 实现代码的可重用性和可维护性

CSS主要部分:选择器及一条或多条声明。

  • 选择器用于指定CSS样式的HTML标签,花括号内是对该对象设置的的具体样式。
  • 属性和属性值以“键值对”的形式出现。
  • 属性是对制定对象设置的样式属性,例如字体大小、文本颜色等。
  • 属性和属性之间用英文“:”分开。
  • 多个键值对之间用英文“;”进行区分。

CSS基础选择器

CSS选择器作用:选择标签

  • 标签选择器

用HTML标签名作为选择器,按标签名分类,为页面中的某一类标签指定统一的CSS样式。

  • 类选择器

为了差异化选择不同的标签,单独选一个或某几个标签,可以使用类选择器。

  • id选择器

样式#定义,结构id调用,只能用一次,别人勿使用
样式点调用,结构类(class)调用,一个或多个,开发最常用

  • 通配符选择器

使用“*”定义,表示选中所有元素(标签)。

CSS字体属性

(1)常用字体属性

CSS介绍

(2)font复合属性

可以把以上文字样式综合来写,节约代码。

格式:

font: font-style font-weight font-size/line-height font-family;

比如:

body{
    font: normal 400 25px 'Microsoft yahei'; 
}
  • 使用font属性时,必须按上面语法格式中的顺序写,不能更换顺序,各个属性间以空格隔开。
  • 不需要设置的属性可以省略,但必须保留font-size和font-family属性,否则font属性将不起作用。

CSS文本属性

CSS介绍

CSS的引入方式

(1)行内样式表(行内式)

在标签内部写个style属性,适合修改简单的样式。

(2)内部样式表(嵌入式)

将所有的CSS代码抽取出来,单独放到一个<style></style>标签中。

<style>
    div {
        color: red;
        font-size: 12px;
    }
</style>

<style></style>标签一般放在<head></head>标签里。

(3)外部样式表(链接式)

开发过程中,使用的最多的方式。

先单独写一个CSS样式文件,然后在HTML页面通过<link>标签引用

<link rel="stylesheet" href="css文件路径">
点赞
收藏
评论区
推荐文章
如何优雅的写 css 代码
CSS(全称CascadingStyleSheets,层叠样式表)为开发人员提供声明式的样式语言,是前端必备的技能之一,基于互联网上全面的资料和简单易懂的语法,CSS非常易于学习,但其知识点广泛且分散,很难做到精通,在我们日常开发中,常常忽视了CSS代码的质量,很容易写出杂乱无章的CSS文件。
菜园前端 菜园前端
2年前
什么是 CSS?
原文链接:什么是CSS?CSS指层叠样式表(CascadingStyleSheets),理解为CSS样式就可以了。CSS样式有什么作用呢?比如我们在页面中添加了一个div,我想给这个div设置宽度、高度、背景色、阴影、内容字体样式等等,就是通过CSS样式来
Wesley13 Wesley13
3年前
CSS3的基础知识学习(二)
前言:CSS主要是用来修饰标签的样式、使得网页更加美观,其实css的引用有三种方式,但主要是使用链接引用,意思就是我们写一个.css的文件,将样式修饰的控制代码写在这里面,这样控制起来方便快捷。对于CSS的学习,知识点中最重要的部分就是属性和选择器,其次还有页面布局和盒子模型,下面进行学习以及代码效果演示。一、CSS的三种引入
Wesley13 Wesley13
3年前
CSS基本语法及页面引用
css基本语法及页面引用(1)css基本语法css的定义方法是:选择器{属性:值;属性:值;属性:值;}选择器是将样式和页面元素关联起来的名称,属性是希望设置的样式属性每个属性有一个或多个值。代码示例:/css注释ctrlshift"/"/d
Stella981 Stella981
3年前
Python+Selenium练习篇之5
前面介绍了,XPath,id,class,linktext,partiallinktext,tagname,name七大元素定位方法,本文介绍webdriver支持的最后一个方法:by\_css。css和XPath类似,也需要掌握一些语法,才能写出正确的,完整的css选择表达式。相关脚本代码如下:codingu
Wesley13 Wesley13
3年前
CSS基本用法介绍
CSS介绍css定义如何显示HTML元素.当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染).CSS语法css实列每个CSS样式由两个组成部分:选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。css注释/这是注释/CSS的几种引入方
Stella981 Stella981
3年前
Sass
嵌套规则(NestedRules)Sass允许将一套CSS样式嵌套进另一套样式中,内层的样式将它外层的选择器作为父选择器mainp{color:00ff00;width:97%;.redbox{
Wesley13 Wesley13
3年前
CSS基础知识整理
1什么是CSS?CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。CSS以HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等,而且还可以针对不同的浏览器设置不同的样式。
Wesley13 Wesley13
3年前
020_CSS3
目录如何学习CSS什么是CSS发展史快速入门css的优势三种CSS导入方式拓展:外部样式两种写法选择器基本选择器层次选择器结构伪类选择器属性选择器美化网页元素为什么要
Stella981 Stella981
3年前
CSS 分类 (Classification)
★★CSS分类属性(Classification)★★⑴CSS分类属性允许你控制如何显示元素,设置图像显示于另一元素中的何处,相对于其正常位置来定位元素,使用绝对值来定位元素,以及元素的可见度。⑵下面是常用的属性以及描述:!(https://oscimg.oschina.net/oscnet/00cb565
Wesley13 Wesley13
3年前
CSS基础_CSS样式的几种书写形式
1.内嵌式将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义,其基本语法格式如下:<head<styletype"text/CSS"标签名/选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3;
神经网络巫师
神经网络巫师
Lv1
你用冰冷的指尖,在我的手心里轻轻写下依赖。
文章
4
粉丝
0
获赞
0