百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术资源 > 正文

css概念以及语法规则

moboyou 2025-06-15 19:11 4 浏览

提示:点击上方"蓝色字体"↑ 可以订阅噢!

css

全称 Cascading Style Sheet

html 页面引入css

1,<link rel="stylesheet" href="url"> 写在head标签中

2, <style></style>

3,<p style="color:red;">内嵌样式</p>

语法:

selector{

属性名:属性值;

proterty1:value;

width:100px;

/*注释*/

...

}

浏览器私有属性

chrome,safari

-webkit-

firefox

-moz-

IE

-ms-

opera

-o-

属性值语法

padding:[<length>|<percentage>|auto]{1,4}

语法说明

1,基本元素 :指的是语法中如length auto 等关键词

2,组合符合 : 指的是 | 等语法说明符合,不同符号代表不同涵义

3 , 数量符号 : {} 以及数字

基本元素:

类型:基本类型(<length>,<percentage>,<color>...)

其他类型(<'padding-width'>,<color-stop>...)

符号:(/,)

inherit ,initial

组合符合

空格:数顺序必须一致 且数量也一样,如下

<'font-size'> <'font-family'>

合法值: 12px arial

非法:arial 12px

12px

&& :<length>&&<color> 两个值必须出现,不要求顺序一致

合法: green 2px

1em blue

非法:1em

||:至少出现一个,顺序不要求

|:只能出现其中一个,不同时出现

:bold [<length>|<percentage>] 分组作用

数量符号:

无 : 表示基本元素只能出现一次 <length>

+: 出现一次或多次 <color> [,<color>]+

合法值:#fff , red ,gray

?:可以出现也可以不出现 相当于可选 inset?&&<color>

inset blue

red

{} :表示基本元素最少出现几次,最多出现几次 <length>{2,4}

*:可以出现0,1,或者多次

#:需要出现一次或者多次 ,多次用逗号隔开

@规则

@标识符 xxx;

@标识符 xxx{};

常用: @media

@keyframes

@font-face

想认识志同道合的朋友一起学习web

加入我们的学习QQ群 190166743

丰富的学习资源,周一到周四免费直播公开课

长按图片,识别二维码即可入群

你可能感兴趣的精彩内容

长按关注:《UI设计自学平台》

相关推荐

在html5页面中如何使用vue3

今天是2021.7.14,是个好日子.好久没发布文章了.今天发布下如何在在html页面中使用vue3.义县游学电子科技一直以技术文章为主.以下是h5的页面源码:<html><scri...

分享几个css实用技巧

本篇将介绍几个css小技巧,目录如下:自定义引用标签的符号重置所有标签样式禁止文本选择制作小三角形自定义<q>引用标签的符号默认q标签引用符号是浏览器根据不同语言环境自动设置的,当然我们也...

复玥语 Web Fonts 的引入方法

CSS的font-face属性CSS的font-face是CSS3中允许使用自定义字体的一个模块,功能是支持WEB字体,能够将网络地址、自定义的Web上的字体嵌入到你的网页中。...

17个CSS知识点整理

微信ID:WEB_wysj(点击关注)◎◎◎◎◎◎◎◎◎一┳═┻︻▄(点击页底“阅读原文”下载源代码)●●●1、对WEB标准以及W3C的理解与认识标签闭合、标签小写、不乱嵌套、提高搜索机...

JavaScript开发基础——CSS知识

JavaScript开发基础——CSS知识使用CSS技术可以对文档进行精细的页面美化,CSS不仅可以对单个页面进行格式化,还可以对多个页面使用相同的样式进行修饰,以达到统一的效果。CSS的相关概念CS...

HTML序章(学习目的、对象、基本概念)——零基础自学网页制作

为什么学习网页制作?互联网时代的今天,各种各样的网页充斥着我们的生活。只要使用浏览器,打开的每一个页面都可以称之为网页。即使使用头条这样的APP,其内容布局、展示的方法也脱胎于网页页面设计的方法与原则...

如何拥有渐变色 | css进阶

渐变色--线性渐变人类对美的追求是无止境的,色彩的搭配是对美的最基本要求,而其中的渐变,就能给人一种舒缓的感觉,它不那么的突兀,给人一种不逼迫、缓缓地和高逼格感觉。Css3引入了渐变的功能,有线性渐变...

Tailwindcss 入门

是什么?Tailwindcss是一个功能类优先的CSS框架,通过flex,pt-4,text-center和rotate-90这种原子类组合快速构建网站,而不需要离开你的HTML。...

html css js基础知识点

提示:点击上方"蓝色字体"↑可以订阅噢!1.对WEB标准以及W3C的理解与认识标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更...

(一)熟练HTML5+CSS3,每天复习一遍

前言学习网页的概念和分类,了解静态网页和动态网页的不同;了解网页浏览器的工作原理。了解HTML,XHTML,HTML5的概念,制作简单的HTML页面的开发。什么是网页可以在internet上通过网页浏...

JavaScript代码怎样引入到HTML中?

JavaScript程序不能独立运行,它需要被嵌入HTML中,然后浏览器才能执行JavaScript代码。通过<script>标签将JavaScript代码引入到HTM...

你知道HTML、CSS、JS文件在浏览器中是如何转化成页面的吗?

在前面一篇文章:「高频面试题」浏览器从输入url到页面展示中间发生了什么中,我们有对浏览器的渲染流程做了一个概括性的介绍,今天这篇文章我们将深入学习这部分内容。对于很多前端开发来说,平常做工主要专注...

HTML页面中head标签有啥用?——零基础自学网页制作

head标签概述通过之前三节的学习,我们基本了解了HTML标记语言的基本语法,也明确了一个基本原则,那就是网页中所有的可视信息都是写在<body></body>标签之间的,在一...

一、什么是CSS3

一、什么是CSS3如何学习SEO搜索引擎优化CSS是什么CascadingSheet层叠级联样式表,表现,网页美化CSS发展史:CSS1.0CSS2.0DIV+CSSHTML和CSS结构分...

html实现原生table并设置表格边框的两种方式

在HTML中实现原生表格并设置表格边框的详尽教程在HTML中,表格是展示结构化数据的重要工具。为了使表格更加清晰、美观,设置表格边框是常见的需求。本文将深入探讨两种原生方式来实现表格边框...