济南建设集团招聘信息网站,做网站坂田,网站生成手机网站,东莞网页设计招聘目录 前言:
1.什么是CSS:
2.关于css的主要特性:
2.1层叠性#xff1a;
2.2继承性#xff1a;
2.3优先级#xff1a;
2.4.CSS的组成结构:
3.css样式的三种写法:
3.1内联样式#xff1a;
3.1.2存在的优点和缺点:
3.2内部样式表#xff1a; 3.2.2存在的优点和缺点:…
目录 前言:
1.什么是CSS:
2.关于css的主要特性:
2.1层叠性
2.2继承性
2.3优先级
2.4.CSS的组成结构:
3.css样式的三种写法:
3.1内联样式
3.1.2存在的优点和缺点:
3.2内部样式表 3.2.2存在的优点和缺点:
3.3外部样式表
3.4CSS选择器
4.盒子标签:
4.1块级元素
4.2页面中的一个独立部分 4.3文章或内容块 4.4导航链接的语义元素 4.5辅助内容 4.6页面或部分的头部 4.7页面或部分的页脚 4.8突出显示文本: 4.9文本标签 4.10创建表格布局 , 5.文本样式: 5.1文本的颜色color 5.2设置文本的水平对齐方式text-align 5.3文本添加text-decoration 5.4text-indent 5.5 text-shadow 5.6 letter-spacing 5.7 word-spacing 5.8 line-height 5.9 font-family 5.10 font-size 5.11 font-weight 5.12 font-style 5.13 text-transform 5.14 white-space 5.15direction 结语: 前言:
昨天我们已经开始学习了关于web前端的html的一点知识,今天我们开始学习前端三剑客里面的的另一个css样式还有文本背景样式.这些都是我个人的学习,欢迎大家一起和谐讨论.
1.什么是CSS:
CSS层叠样式表Cascading Style Sheets是一种用于描述HTML或XML包括如SVG、XHTML等派生语言文档样式的计算机语言。CSS描述了如何在屏幕、纸质、音频等各种媒体中渲染元素。这种分离使得文档内容written in HTML or a similar markup language与文档的表现如样式设计可以独立开来。这种分离有许多优点包括改进内容的可访问性提供更多的样式和设计选项以及使得网站更易于维护和更新。 2.关于css的主要特性:
2.1层叠性
当多个样式应用于同一个HTML元素时CSS会根据一定的规则如选择器的特异性来确定哪个样式应该被应用。这就是所谓的“层叠”或“级联”。 2.2继承性
在CSS中某些样式属性可以从父元素继承到子元素。例如如果你为一个元素设置了特定的字体那么该元素的所有子元素也会默认使用这种字体除非你为它们特别指定了另一种字体。 2.3优先级
当多个样式规则可以应用到同一个元素上时CSS会根据一套复杂的优先级规则来决定哪个规则应该生效。这些规则包括选择器的类型如内联样式优先于外部样式表、选择器的特异性更具体的选择器优先于更一般的选择器以及规则的来源用户定义的样式可能优先于作者定义的样式等。
2.4.CSS的组成结构:
基本语法结构非常简单主要由三部分构成选择器、属性和值。选择器用于指定应用样式的HTML元素属性是你想要改变的样式属性值则是你给这个属性赋予的特定值。例如p {color: red;}这个规则表示所有p元素的文本颜色应该是红色。其中p是选择器color是属性red是值。
3.css样式的三种写法:
3.1内联样式
直接在HTML元素中使用style属性来添加CSS样式。这种方法适用于单个元素的特定样式但不建议在大型项目中使用因为它会使HTML代码变得混乱且难以维护。 通过标签属性style.直接把样式写在标签里 标签名 style属性:值; 属性:值;
p stylecolor: red;这是一段红色的文本。/p 3.1.2存在的优点和缺点:
优点: 权重很高,写起来很方便 缺点: 灵活性不强 频率: 较少 范围: 单个标签
3.2内部样式表
在HTML文档的head部分使用style标签来包含CSS规则。这种方法适用于单个页面的样式定义 例子: head style css代码 /style /head
head style p { color: red; } /style
/head
body p这是一段红色的文本。/p
/body 3.2.2存在的优点和缺点: 优点: 写起来方便/只有一个页面很灵活 缺点: 不可复用 频率: 较高(学习阶段常用) 范围: 单个页面 3.3外部样式表
将CSS规则保存在一个单独的.css文件中并通过HTML文档的link标签引用它。这是最常见且最推荐的方法因为它使HTML和CSS分离更易于管理和维护。
head link relstylesheet hrefstyles.css
/head
body p这是一段红色的文本。/p
/body 3.3.2存在的优点和缺点: 优点: 可以重复使用 缺点: 需要导入 频率: 最高(正式开发时.主要用它) 范围: 整个网站
3.4CSS选择器
在CSS中你使用选择器来“找到”你想要样式化的HTML元素。选择器可以基于元素的名称、ID、类、属性等来匹配元素。例如上面的例子中p就是一个选择器它选择了所有的p元素。你还可以使用更复杂的选择器来匹配特定的元素或元素组合。
4.盒子标签:
在HTML中盒子标签通常指的是div元素也被称为division或区块标签。div是一个块级元素用于将网页内容划分为独立、不同的部分或区块。它本身并不包含任何特定的格式或样式但可以通过CSS进行高度定制包括设置宽度、高度、背景色、边框等属性。
盒子模型是CSS布局的基础每个HTML元素都可以看作是由内容、内边距padding、边框border和外边距margin组成的矩形盒子。
以下是关于盒子标签的一些详细的介绍: 4.1块级元素div:
块级元素常用于布局和样式化。它可以包含其他块级元素和内联元素是构建页面结构的主要元素之一。
4.2页面中的一个独立部分section:
HTML5引入的语义元素表示页面中的一个独立部分。它通常用于包含一组相关的内容。
4.3文章或内容块article:
另一个HTML5语义元素表示页面中的一篇文章或内容块。它通常包含标题、段落、图像等元素。
4.4导航链接的语义元素nav:
用于包含导航链接的语义元素。它通常包含一组指向网站不同部分的链接。
4.5辅助内容aside:
表示与页面主要内容相关但不太重要的辅助内容。它可以用于包含侧边栏、广告、引用等元素。
4.6页面或部分的头部header:
表示页面或部分的头部。它通常包含标题、标志、导航等元素。
4.7页面或部分的页脚footer:
表示页面或部分的页脚。它通常包含版权信息、联系信息、社交媒体链接等元素。
4.8突出显示文本span:
内联元素用于对文本进行样式化。它不会引入换行常用于突出显示文本或设置文本的样式。
4.9文本标签p:
段落元素用于包含一段文本。它是块级元素会在其内容前后引入换行。
4.10创建表格布局ul, ol, li:
分别表示无序列表、有序列表和列表项。它们常用于创建列表结构。它们用于创建表格布局。
5.文本样式:
CSS中与文本样式相关的详细属性列表及其说明 5.1文本的颜色color
作用设置文本的颜色。值类型颜色值可以是颜色名称、十六进制颜色代码、RGB值或RGBA值。示例color: red; 或 color: #ff0000;。
5.2设置文本的水平对齐方式text-align
作用设置文本的水平对齐方式。值类型left左对齐、right右对齐、center居中对齐、justify两端对齐。示例text-align: center;。
5.3文本添加text-decoration
作用为文本添加装饰线如下划线、上划线、删除线等。值类型none无装饰线、underline下划线、overline上划线、line-through删除线或它们的组合。示例text-decoration: underline;。
5.4text-indent
作用设置文本的首行缩进。值类型长度值如像素值或百分比或负值。示例text-indent: 2em;首行缩进两个字符宽度。
5.5 text-shadow
作用为文本添加阴影效果。值类型horizontal-offset vertical-offset blur-radius color其中horizontal-offset和vertical-offset是阴影的水平和垂直偏移量blur-radius是阴影的模糊半径color是阴影的颜色。示例text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);添加黑色模糊阴影。
5.6 letter-spacing
作用设置字符之间的间距。值类型长度值如像素值或normal默认值正常间距。示例letter-spacing: 2px;。
5.7 word-spacing
作用设置单词之间的间距。值类型长度值如像素值或normal默认值正常间距。注意这个属性对中文文本通常没有效果。示例word-spacing: 5px;。 5.8 line-height
作用设置行高即文本行与行之间的垂直间距。值类型长度值如像素值、百分比或normal默认值根据字体大小自动计算行高。示例line-height: 1.5;行高为字体大小的1.5倍。
5.9 font-family
作用设置文本的字体。值类型字体名称列表用逗号分隔。浏览器会按顺序尝试使用列表中的字体直到找到可用的字体为止。示例font-family: Arial, sans-serif;首选Arial字体如果不可用则使用无衬线字体。
5.10 font-size
作用设置文本的大小。值类型绝对大小如xx-small、x-small、small、medium、large、x-large、xx-large、相对大小如larger、smaller或长度值如像素值、百分比。还可以使用em和rem单位表示相对于当前元素或根元素的字体大小。示例font-size: 16px; 或 font-size: 1em;。
5.11 font-weight
作用设置文本的粗细程度。值类型normal正常、bold粗体、bolder更粗、lighter更细或数字值如100到900之间的整数以100的倍数递增。注意不是所有的字体都支持所有的粗细程度。示例font-weight: bold;。
5.12 font-style
作用设置文本的字体样式。值类型normal正常、italic斜体或oblique倾斜。注意oblique通常与italic有细微的差别但具体取决于字体本身的设计。示例font-style: italic;。
5.13 text-transform
作用控制文本的大小写转换。值类型none无转换、capitalize每个单词的首字母大写、uppercase全部大写或lowercase全部小写。示例text-transform: uppercase;。 5.14 white-space
作用控制文本中的空白字符如何处理。值类型normal合并空白字符和换行符、nowrap不换行忽略换行符、pre保留空白字符和换行符等。还有其他一些值但不太常用。示例white-space: nowrap;防止文本换行。
5.15direction
作用设置文本的方向。这对于从右到左书写的语言如阿拉伯语和希伯来语非常有用。值类型ltr从左到右、rtl从右到左等。还有其他一些值但不太常用。示例direction: rtl;设置文本从右到左显示。 结语:
今天我们介绍了关于css的一些的基本的内容,这些都是我的个人学习的一些笔记,可能会有所遗漏,欢迎大家的指正,也欢迎大家在评论区和谐讨论。
