美文网首页
CSS---介绍,语法,选择器,文本样式

CSS---介绍,语法,选择器,文本样式

作者: 王绘的名字被注册了 | 来源:发表于2018-06-05 19:45 被阅读0次

1.什么是CSS,CSS是如何工作的

CSS是层叠样式表用来样式化和排版你的网页的,例如更改网页内容的字体、颜色、大小等等

当浏览器显示文档时,他必须将文档的内容与其样式信息结合,它分两个阶段处理文档,第一个是浏览器将HTML和CSS转化为DOM(文档对象模型),DOM把文档内容和其样式结合在一起,第二是浏览器显示DOM的内容。

2.CSS的基本语法是怎样的

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

            选择器通常是您需要改变样式的 HTML 元素。

            每条声明由一个属性和一个值组成。 属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开,分号;结尾。例如color:#fff;  文本颜色为白色

3.CSS选择器是什么概念,简单选择器和属性选择器是什么

选择器用于定位我们想要样式化的网页HTML元素。

简单选择器(Simple selectors):通过元素类型、class 或 id 匹配一个或多个元素。

属性选择器(Attribute selectors):通过 属性 / 属性值 匹配一个或多个元素。

        属性选择器是一种特殊类型的选择器,它根据元素的 属性和属性值来匹配元素。它们的通用语法由方括号([]) 组成,其中包含属性名称,后跟可选条件以匹配属性的值。

·第一类存在和值属性选择器

[attr]:该选择器选择包含 attr 属性的所有元素,不论 attr 的值为何。

[attr=val]:该选择器仅选择 attr 属性被赋值为 val 的所有元素。

[attr~=val]:该选择器仅选择 attr 属性的值(以空格间隔出多个值)中有包含 val 值的所有元素,比如位于被空格分隔的多个类(class)中的一个类。

HTML文件


css文件 浏览器显示

·第二类子串值属性选择器

[attr|=val] : 选择attr属性的值是 val 或值以 val- 开头的元素(-用来处理语言编码)。

[attr^=val] : 选择attr属性的值以val开头(包括 val)的元素。

[attr$=val] : 选择attr属性的值以val结尾(包括 val)的元素。

[attr*=val] : 选择attr属性的值中包含字符串 val 的元素。

伪选择器(Pseudo-classes):匹配处于确定状态的一个或多个元素,伪选择器 。该选择器不是选择元素,而是元素的某些部分,比如被鼠标指针悬停的元素,或当前被选中或未选中的复选框,或元素是DOM树中一父节点的第一个子节点。分为伪类和伪元素。

· 伪类(pseudo-class) 是一个以冒号(:)作为前缀的关键字,比如a:hover代表鼠标悬停在a标签上的样式是如何。

HTML文件 css文件 未点击之前


鼠标悬停

·伪元素前缀是两个冒号 (::) , 同样是添加到选择器后面去选择某个元素的某个部分。

伪元素


组合器(Combinators):这里不仅仅是选择器本身,还有以有效的方式组合两个或更多的选择器用于非常特定的选择的方法。例如,你可以只选择divs的直系子节点的段落,或者直接跟在headings后面的段落。

A,B   匹配满足A(和/或)B的任意元素(参见下方 同一规则集上的多个选择器).

A B   匹配任意元素,满足条件:B是A的后代结点(B是A的子节点,或者A的子节点的子节点)

A > B    匹配任意元素,满足条件:B是A的直接子节点

A + B   匹配任意元素,满足条件:B是A的下一个兄弟节点(AB有相同的父结点,并且B紧跟在A的后面)

A ~ B   匹配任意元素,满足条件:B是A之后的兄弟节点中的任意一个(AB有相同的父节点,B在A之后,但不一定是紧挨着A)  

例如:

设计链接的样式,但是只针对ul无序列表中的链接有效;

设计ul列表里的链接样式,但是只当鼠标停留在上面时有效;

设计只紧接着最大标题下的段落样式。   

所以相关css文件:

css文件


浏览器显示


多用选择器(Multiple selectors):这些也不是单独的选择器;这个思路是将以逗号分隔开的多个选择器放在一个CSS规则下面, 以将一组声明应用于由这些选择器选择的所有元素。

多用选择器

4.文本样式都有哪些相关属性,对应哪些值

文本颜色:color,值有16进制的如:#fff;有rgb(255,0,255),有颜色的名称,如red

文本对齐方式:文本排列属性是用来设置文本的水平对齐方式。文本可居中center或对齐到左left或右right,两端对齐.当text-align设置为"justify",每一行被展开为宽度相等,左,右外边距是对齐(如杂志和报纸)。h1 {text-align:center;}p.date {text-align:right;}p.main {text-align:justify;}

文本修饰:text-decoration 属性用来设置或删除文本的装饰。从设计的角度看 text-decoration属性主要是用来删除链接的下划线:a {text-decoration:none;}

文本转换来指定在一个文本中的大写和小写字母。可用于所有字句变成大写或小写字母,或每个单词的首字母大写。p.uppercase {text-transform:uppercase;}p.lowercase {text-transform:lowercase;}p.capitalize {text-transform:capitalize;}

文本缩进用来指定文本的第一行的缩进。p {text-indent:50px;}

css中的文本样式属性

相关文章

  • CSS---介绍,语法,选择器,文本样式

    1.什么是CSS,CSS是如何工作的 CSS是层叠样式表用来样式化和排版你的网页的,例如更改网页内容的字体、颜色、...

  • CSS

    语法: 引用方式 外部样式表 内部样式表 内联样式 常用选择器 组合选择器 伪类 背景图像 文本的对齐方式 盒子模...

  • CSS-基础

    选择器样式:背景/大小样式:文本/字体 选择器 样式:背景/大小 样式:文本/字体 样式:边框 样式:内边距 样式...

  • CSS基础

    一.CSS语法 二.选择器 三. 尺寸,背景,文本,字体,鼠标样式 四. 表格,边框,内外边距,边框模型 边框样式...

  • CSS简介

    一、CSS语法规范 选择器{样式}——>给谁改样式{改什么样式} 1、选择器是用于指定CSS样式的HTML标签,花...

  • 【CSS】Less

    LESS 语法 变量 @ 样式变量 样式名变量 选择器变量 变量拼接 父选择器 & 嵌套 继承extend 合并属...

  • HTML // CSS

    HTML常用标签 CSS 样式与选择器 快捷语法

  • 2019-08-01jQuery基础

    语法 常用选择器 属性选择器 基本过滤器 书写要规范 样式设计 追加行内样式和移除 切换样式 常用 推荐on方法

  • 前端——CSS

    CSS CSS可以用来为网页创建样式表,通过样式表可以对网页进行装饰 基本语法 语法: —选择器{样式名:样式值;...

  • css三种样式 和选择器

    CSS的样式表由一个一个的样式构成,一个样式又由选择器和声明块构成。 语法:选择器 {样式名:样式值;样式名:样式...

网友评论

      本文标题:CSS---介绍,语法,选择器,文本样式

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