最流行的网站设计风格,品牌设计师需要具备什么能力,湖北营销型网站建设费用,兰州企业网站1、CSS与HTML结合方式 1.1 第一种方式 内联/行内样式 就是在我们的HTML标签上通过style属性来引用CSS代码。 优点:简单方便 #xff1b; 缺点:只能对一个标签进行修饰。 1.2 第二种方式 内部样式 我们通过style标签来声明我们的CSS. 通常style标签我们推荐写在…1、CSS与HTML结合方式 1.1 第一种方式 内联/行内样式 就是在我们的HTML标签上通过style属性来引用CSS代码。 优点:简单方便 缺点:只能对一个标签进行修饰。 1.2 第二种方式 内部样式 我们通过style标签来声明我们的CSS. 通常style标签我们推荐写在head和body之间也就是“脖子”的位置 优点:可以通过多个标签进行统一的样式设置 缺点: 它只能在本页面上进行修饰 语法 选择器 {属性:值;属性:值} 1.3 第三种方式 外部样式 我们需要单独定义一个CSS文件,注意CSS文件的后缀名就是.css 在项目根目录下创建css目录在css目录中创建css文件 css01.css 在head中使用link标签引用外部的css文件 还可以使用另一种引入css文件的方式
style import css/.css
/style关于外部导入css使用link与import的区别? 1. 加载顺序不同 import方式导入会先加载html然后才导入css样式那么如果网络条件不好就会先看到没有修饰的页面然后才看到修饰后的页面。 如果使用link方式它会先加载样式表也就是说我们看到的直接就是修饰的页面 2. import方式导入css样式它是不支持javascript的动态修改的。而link支持。 三种样式表的优先级满足就近原则 内联 内部 外部 2、CSS的使用
2.1CSS中的选择器
2.1.1 元素(标签)选择器
它可以对页面上相同的标签进行统一的设置它描述的就是标签的名称 2.1.2 类选择器
类选择器在使用时使用.来描述它描述的是元素上的class属性值 2.1.3 id选择器
它只能选择一个元素使用 “#” 引入引用的是元素的id属性值。 id选择器比类选择器更具有唯一性 2.1.4 选择器组 2.1.5 派生选择器
子代父子关系隔代不管 后代父子孙曾孙从孙… 2.1.6 CSS伪类 CSS伪类可对css的选择器添加一些特殊效果 伪类属性列表
:active 向被激活的元素添加样式。:hover 当鼠标悬浮在元素上方时向元素添加样式。:link 向未被访问的链接添加样式。:visited 向已被访问的链接添加样式。:first-child 向元素的第一个子元素添加样式。
超链接的伪类要遵守使用顺序爱恨原则 LoVeHAtelvha
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */2.2 CSS基本属性
2.2.1 文本属性
指定字体font-family : value;字体大小font-size : value 注px像素em倍数字体加粗font-weight : normal/bold;文本颜色color : value;文本排列text-align : left/right/center;文字修饰text-decoration : none/underline;行高line-height : value;首行文本缩进text-indent : value 2em; 2.2.2 背景属性
CSS 允许应用纯色作为背景也允许使用背景图像创建相当复杂的效果。
background-color 设置元素的背景颜色。background-image 把图像设置为背景。 background-image: url(img/1.jpg);background-repeat 设置背景图像的墙纸效果是否及如何重复
repeat在垂直方向和水平方向重复为重复值repeat-x仅在水平方向重复repeat-y仅在垂直方向重复no-repeat仅显示一次
background-position 设置背景图像的起始位置1控制水平方向 x轴 正值向右移动 负值向左移动2控制垂直方向 y轴 正值向下移动 负值向上移动 /* 图片向左移动50px向下移动100px 可以为负值 */background-position:50px 100px;background-attachment 背景图像是否固定或者随着页面的其余部分滚动
默认值是 scroll默认情况下背景会随文档滚动可取值为 fixed背景图像固定并不会随着页面的其余部分滚动常用于实现称为水印的图像
background-attachment: fixed;2.2.3 列表属性
CSS列表属性作用如下:
设置不同的列表项标记为有序列表设置不同的列表项标记为无序列表设置列表项标记为图像
有两种类型的列表:
无序列表 - 列表项标记用特殊图形(如小黑点、小方框等)有序列表 - 列表项的标记有数字或字母
使用CSS可以列出进一步的样式并可用图像作列表项标记。
none:无标记。(去除标记)disc:默认。标记是实心圆。circle:标记是空心圆。square:标记是实心方块。decimal:标记是数字。decimal-leading-zero:0开头的数字标记。(01, 02, 03, 等。)lower-roman:小写罗马数字(i, ii, iii, iv, v, 等。)upper-roman:大写罗马数字(I, II, III, IV, V, 等。)lower-alpha:小写英文字母The marker is lower-alpha (a, b, c, d, e,等。)upper-alpha:大写英文字母The marker is upper-alpha (A, B, C, D, E,等。) 2.2.4 边框属性(未完待续...)
