外链网址,网站做seo必要的结构,物流运输网,软件网站建设专业文章目录 一、什么是CSS二、基本语法规范三、CSS引入方式3.1 内部样式表3.2 行内样式表3.3 外部样式 四、CSS选择器4.1 基础选择器4.1.1 标签选择器4.1.2 类选择器4.1.3 id选择器4.1.4 通配符选择器 4.2 复合选择器4.2.1 后代选择器4.2.2 链接伪类选择器 五、字体属性5.1 字体设… 文章目录 一、什么是CSS二、基本语法规范三、CSS引入方式3.1 内部样式表3.2 行内样式表3.3 外部样式 四、CSS选择器4.1 基础选择器4.1.1 标签选择器4.1.2 类选择器4.1.3 id选择器4.1.4 通配符选择器 4.2 复合选择器4.2.1 后代选择器4.2.2 链接伪类选择器 五、字体属性5.1 字体设置5.2 字体大小设置5.3 字体颜色设置5.4 字体粗细设置5.5 文字样式 六、文本属性6.1 文本对齐6.2 文本装饰6.3 文本缩进6.4 行间距 一、什么是CSS
CSS层叠样式表Cascading Style Sheets是一种用于控制网页视觉表现的样式表语言主要功能包括
样式控制定义文本颜色、字体、间距、背景等外观属性。精准布局通过盒模型、浮动、Flexbox 等技术实现像素级精确排版。动态交互配合脚本语言实现动画、响应式设计如适配不同设备屏幕。样式复用通过外部样式表统一管理多个页面的样式提升可维护性。
简单的来说HTML是骨架CSS是皮肤而JS是灵魂。 提示在学习本内容前需要有一定的html基础可以通过小编的html基础学习进行观看
二、基本语法规范 选择器 { 一条/N条声明 } 选择器定位修改的地方声明决定需要修改什么声明的属性是键值对使用分号区分键值对使用区分键和值 stylep{/* 设置字体颜色 */color:red;/* 设置字体大小 */font-size: 40px;}
/styleCss要写到style标签中style标签可以放在页面的任意位置一般放在head标签内Css使用/**/作为注释。快捷键为ctrl/
实例演示
未加css样式
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyphello nbsp;world/p
/body
/html加了css样式字体变成红色大小变成40px1。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylep{/* 设置字体颜色 */color:red;/* 设置字体大小 */font-size: 40px;}
/style
/head
bodyphello nbsp;world/p
/body
/html在这里p表示p标签的样式。在上面代码中style标签内就是Css的样式其中p表示选择器括号内的声明需要修改的样式声明的属性都是键值对的形式前面是键后面是值用分开然乎每个属性用分号进行分开。 在上面css样式选中的是只要是p标签的都会修改样式而其他的标签的样式则不会进行修改如下面的标题标签中的内容你好。 三、CSS引入方式
3.1 内部样式表
将Css嵌套的HTML页面当中通过style标签进行嵌套。向上面就是内部样式表这是一个html界面代码但是Css利用style标签嵌套在HTML中。
优点是可以样式和结构进行分离也就是只在style标签中设置样式然后再head中设置整个页面的布局结构。 缺点 缺乏复用性导致代码重复和维护困难 内部样式表仅对当前页面有效。如果一个网站有多个页面需要使用相同的样式规则则必须在每个页面的 style 标签中重复编写这些规则造成大量的代码冗余增加了文件总体积。当需要更改样式时必须在每个包含该样式的 HTML 文件中逐一修改维护成本高且易出错 。 导致 HTML 文件臃肿结构与样式未完全分离 style 标签内的 CSS 代码会显著增加 HTML 文件本身的体积和复杂度。这违背了前端开发提倡的“结构与样式分离”的最佳实践使得 HTML 文件不仅包含内容结构还包含大量样式代码降低了代码的可读性和清晰度难以管理和调试
3.2 行内样式表
通过style属性来指定哪个标签的样式。他只针对某个标签有效。 比如在这里我想单独设置你好这两个字的颜色此时就可以单独对这一个标签进行设置 在这里单独设置一个标签的颜色会覆盖整体style标签中的样式在上面hello world都是p标签且同时都被样式标签进行设置为红色此时使用行内样式表可以单独设置一行的hello world为黄色。 所以行内样式表的优先级比内部样式表的优先级要高。此时如果同时存在行内样式表和内部样式表的时候优先使用行内样式表的样式。
3.3 外部样式
外部样式也是实际开发过程中最常用的方式。它会将样式单独写到一个css文件里然后再html里将css文件引入进来。 创建一个 css 文件.使用 link 标签引入 css link rel“stylesheet” href“[CSS文件路径]” 创建demo2.html
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titletitle外部样式/titlelink relstylesheet href./demo02.css
/head
bodydivGenius is one percent inspiration and ninety-nine percent perspiration, but the 1% inspiration is the most important, even more than the 99% perspiration. /div
/body
/html创建demo2.css
div {color: red;font-size: 15px;
}最终显示结果 四、CSS选择器
学过测试的同学可能会了解在web自动化测试的操作核心是能够找到页面对应的元素 然后才能对元素进行具体的操作那找到元素的方式就可以通过css选择器进行查找。那什么是选择器呢简单的来说就相当于坐标跟发射导弹一样的精准定位根据选择器的位置精准定位到元素对元素进行修改查看。
4.1 基础选择器
4.1.1 标签选择器
标签选择器。也就是我们之前用到的html中的像什么ph1~h6br等标签进行定位如下图针对html中所有段落标签进行修改 特点:
能快速为同一类型的标签都选择出来。也就是说他只能把同一个标签进行修改相同的样式。但是不能差异化选择。也就是说它既不能使相同的标签呈现不同的样式也不能使不同的标签呈现相同的样式。
4.1.2 类选择器
使相同标签呈现不同的样式也可以使不同的标签呈现相同的样式
语法形式:
在css当中
.类名 {1或者N条声明
}
在html中
标签 class类名内容/标签名例子 html
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlelink relstylesheet href./3类选择器.css
/head
bodyp classeat吃饭/pp classsleep睡觉/pp classdrump打豆豆/p
/body
/htmlcss通过点类名的方式对不同类名的相同标签设置不同的样式。所以html中相同的标签中需要存在class属性进行区分。
.eat {color: red;font-size: 15px;
}
.sleep {color: blue;font-size: 10px;
}
.drump {color: yellow;font-size: 20px;
}显示效果
在class属性当中还可以添加多个类名从而可以达到叠加的效果 在上面一个字体大小和颜色设置样式就同时叠加效果到了打豆豆三个字上。
4.1.3 id选择器
和类选择器类似不同的是在CSS中使用#开头表示id选择器id选择器的值和html中的某个元素的id值相同。
注意 id是唯一的不能同时被多个标签使用这是和类选择器最大的区别
4.1.4 通配符选择器
使用*的定义选取所有的标签这里是设置整个页面所有的样式的。一般是整个页面样式的相同点。
*{color: blue;
}页面的所有内容都会被修改成绿色 例子2 将背景颜色改为浅黄色
通配符选择器在实际应用开发中用来针对页面中所有的元素默认样式进行消除主要用来消除边距。
4.2 复合选择器
将之前的学习的基础选择器进行组合
4.2.1 后代选择器
后代选择器就是选择某个父元素中的某一个子元素。
语法形式 元素1 元素2{样式声明} 元素1和元素2需要使用空格分割 元素1是父元素元素2是子元素 例子
正常情况下分别创建一个有序列表一个无序列表。效果如下 如果此时只通过li进行修改那么就会把所有的列表都变成红色 当然也可以选择类选择器进行修改样式但是如果有序列表存在无数行那每行都要加那不要累死了么所以在这里通过后代选择器将ol中的li改成红色 也可以通过选择器组合的方式进行修改类选择器标签选择器
4.2.2 链接伪类选择器
伪类选择器是用来定义元素状态的。什么是状态呢 打开百度页面正常左上角的新闻是黑色的。 此时把鼠标放上去就变成蓝色了。 像上述功能可以通过伪类选择器进行实现。
1、链接伪类选择器 a:link 选择未被访问过的链接 a:visited 选择已经被访问过的链接 a:hover 选择鼠标指针悬停上的链接 a:active 选择活动链接(鼠标按下了但是未弹起) 正常链接什么都不设置的情况字体默认是蓝色并且存在下划线 a:link 选择未被访问过的链接这里表示选中的链接为未访问过的。此时设置链接下面的下划线删除掉并且未访问时候的链接为红色。 a:visited表示选择访问后的标签在这里将访问后标签颜色由红色变成绿色 a:hover 选择鼠标指针悬停上的链接当鼠标悬停在链接上的时候设置的样式
a href# target_blank百度/a
a:link {color: red;/* 去掉 a 标签的下划线 */text-decoration: none;
}a:visited {color: green;
}a:hover {color: blue;font-size: 50px;
}在这里通过设置当鼠标悬停到百度链接这里就会字体变大成50px然后字体的颜色也会变成蓝色。 a:active 选择活动链接(鼠标按下了但是未弹起)谈起就表示你访问该链接按下就表示你将要访问。
a href# target_blank百度/a
a:link {color: red;/* 去掉 a 标签的下划线 */text-decoration: none;
}a:visited {color: green;
}a:hover {color: blue;font-size: 50px;
}a:active {color: blueviolet;
}在上面伪类选择器还可以使用在很多方面比如单选框按钮等
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle#button {/* 让登录按钮默认显示蓝色 */color: blue;}#button:hover {/* 鼠标悬停的时候为红色 */color: red;}#button:active {/* 按下按钮不松开显示绿色 */color:green;}/style
/head
bodyinput typebutton value登录按钮 idbutton
/body
/html五、字体属性
注意
CSS 属性有很多, 可以参考文档https://www.w3school.com.cn/cssref/index.asp
5.1 字体设置
p这是一个文本内容/p正常没加字体样式显示效果如下
此时加了字体样式设置 stylep {font-family: 楷体;}
/style5.2 字体大小设置
语法
选择器 {font-size:20px;
}正常不加上字体大小设置
在这里给字体大小进行设置为50px此时效果如下 不同的浏览器默认字号不一样, 最好给一个明确值. (chrome 默认是 16px)可以给 body 标签使用 font-size要注意单位 px 不要忘记不然设置的字体大小样式就不会生效标题标签需要单独指定大小
5.3 字体颜色设置
字体颜色设置在之前的操作中就演示过但是不尽然字体颜色设置存在三种方式
color颜色;
color:#ff0000;
color:rgb(255,0,0);在上面
#ff0000通过16进制把三原色参与像素点进行表示ff代表红色像素点这个数字越大红色越深后面两位00叫做绿色是最后两个零代表蓝。rgb(255,0,0);其实和上面的一样的只不过将16进制转换成十进制的形式十六进制的ff转换成十进制为255。后面两个分别表示绿色和蓝色只不过值为0. 5.4 字体粗细设置
语法
style选择器 {font-weight: 值;}
/style值有以下几种 效果展示设置字体粗细为100
5.5 文字样式
语法
stylep {font-style: 属性值;}
/style例子 六、文本属性
6.1 文本对齐
语法
text-align: 属性值;不光控制文字水平方向的对齐也能控制图片等元素居中或者靠右 6.2 文本装饰
语法
选择器 {text-decoration:属性值;
}此时这个线条的样式还可以通过下面语法进行修改样式
style选择器 {text-decoration: underline;text-decoration-style: 属性值;}
/style例子
在这里有一段文本内容和一个超链接标签不加任何样式的显示效果。
此时在这里想要去掉链接下面的下划线然后对于上面的内容文本我们加上下划线该如何操作呢此时就需要使用text-decoration设置样式了。
stylea {text-decoration: none;}p {text-decoration: underline;}
/style6.3 文本缩进
控制段落的 首行 缩进 (其他行不影响)
语法形式
text-indent: [值];单位可以使用 px 或者 em.使用 em 作为单位更好. 1 个 em 就是当前元素的文字大小.缩进可以是负的, 表示往左缩进. (会导致文字冒出去)
例子创建一个文本缩进两个文字大小 6.4 行间距
语法
设置行高
选择器 {line-height:属性值;
}注意航高上边距下边距字体大小 上下边距是相等的, 此处字体大小是 16px, 行高 40px, 上下边距就分别是 12px
使用lOrem生成一段文字然后设置航高为40也就是行间距为12px px单位的基本定义px是像素pixel的缩写是数字图像和屏幕显示中的最小单位用于计量图形元素的定位与尺寸36。它是分辨率的核心单位表示纵横向上的像素点数决定了屏幕显示的精细程度13。 ↩︎
