css概述、选择器以及样式属性

1、css的定义和作用

定义：css指的是层叠样式表，是一种用来表现HTML或XML等文件样式的计算机语言，是描述标记语言页面格式的标准。CSS使开发人员能够分离内容和可视元素，以实现更好的页面控制和灵活性。描述了如何在屏幕、纸张或其他媒体上显示html元素，节约了大量的工作，它可以同时控制多张网页的布局。

作用：节约时间、容易维护、页面加载速度快、html的高级样式

2、语法规则

选择器{

声明块

}

选择器：通过选择器可以选中页面的制定元素

声明块：通过声明块来制定要为元素设置样式

代码如下：

<head>

<style>

p{

font-size: 10px;

color: blueviolet;

}

</style>

</head>

3、css引入的方式

行内样式
内部样式
外部样式

4、css选择器

基础选择器：元素选择器、Id选择器、Class选择器、通配符选择器
复合选择器：后代选择器和父代选择器

元素选择器：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title><style>元素选择器 */p{font-size: 10px;color: blueviolet;}</style>
</head>
<body><p>儿童相见不相识</p>
</body>
</html>

id选择器：

<style>/* id选择器  #==id id值不能重复*/#red{font-size: 20px;color: brown;}</style>
</head>
<body> <p id="red" class="yellow abc">少小离家老大回</p>
</body>

class选择器：

<style>       /* 类选择器  .==class     id选择器只能选择其中一个元素   类选折器可以同时选这多个元素当元素有多个class属性，通过空格分隔当多个选择器同时作用于同一个元素时，最后出现的样式会覆盖之前的样式 */.yellow{font-size: 20px;color: cadetblue;}.abc{color: red;}       </style>
</head>
<body> <p class="yellow">乡音无改鬓毛衰</p>
</body>

通配符选择器：

<style>/* 通配选择器 */*{font-size: 20px;color: pink;}</style>
</head>
<body><h1>回乡偶书</h1><p id="red" class="yellow abc">少小离家老大回</p><p class="yellow">乡音无改鬓毛衰</p><p>儿童相见不相识</p>
</body>

5、css样式属性

常用字体属性：font-family :指定字体类型 font- size：指定文本的字体大小；font-style：指定文本的字体样式； font-weight：指定文本的字体粗细； font:在一个声明中设置所有的字体属性
图标字体：字体图标展示的是图标,本质属于字体。主要用于显示网页中通用、常用的一些小图标。字体图标的优势：一个图标字体要比一系列的图像要小。一旦字体加载了,图标就会马上渲染出来,减少了服务器请求。字体图标本质是文字,可以随意的改变颜色、产生阴影、透明效果、旋转等。
常用文本属性：color:设置文本颜色； text-align:对齐元素中的文本；text-decoration:向文本添加修饰；line-height:设置行高
其他常用样式：width:元素的宽度； height:元素的高度； background:背景颜色； opacity:元素透明度； overflow：指定如果内容溢出一个元素的框。

6、制作百度首页的案例，代码如下：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>百度一下，你就知道</title>
</head>
<style>.a{text-align:center;}.b{text-align:center;color: blue;}.c{text-align:center;}.d{text-align:center;font-size: 10px;width: 100%;height: 60px;position: fixed;bottom: 0;}.e{text-align:center;font-size: 10px;opacity: 0.5;position: absolute;bottom: 0;width: 100%;}
</style>
<body><div class="a"><img src="../Baidu/bdlogo.gif"></div><div class="b"><a href="https://www.baidu.com/">新闻</a><a href="https://www.baidu.com/">网页</a><a href="https://www.baidu.com/">贴吧</a><a href="https://www.baidu.com/">知道</a><a href="https://www.baidu.com/">音乐</a><a href="https://www.baidu.com/">图片</a><a href="https://www.baidu.com/">视频</a><a href="https://www.4399.com/">地图</a></div><br><div class="c"><input type="text" name="text1" size="50" maxlength="40"><input type="submit" name="提交" value="百度一下"><br></div><br><br><br><div class="b"><a href="https://www.baidu.com/">百科</a><a href="https://www.baidu.com/">文库</a><a href="https://www.baidu.com/">hao123</a><span>|</span><a href="https://www.baidu.com/">更多>></a></div><br><br><br> <br><br><br><div class="d"><a href="https://www.baidu.com/">把百度设为主页</a><a href="https://www.baidu.com/">安装百度浏览器</a> <br><a href="https://www.baidu.com/">加入百度推广</a><span>|</span><a href="https://www.baidu.com/">搜索风云榜</a><span>|</span><a href="https://www.baidu.com/">关于百度</a><span>|</span><a href="https://www.baidu.com/">About Baidu</a></div><div class="e"><p>2013 Bai du 使用百度前必读 京ICP证030173号</p></div>
</body>
</html>

注意：这里面插入的图片链接的路径可以使用绝对路径，也可以使用相对路径。

css概述、选择器以及样式属性相关推荐

CSS基础(part7)--字体样式属性
学习笔记,仅供参考,有错必纠参考自:CSS中文文档文章目录 CSS CSS的长度单位字体样式属性 font-size font-family font-weight font-style fon ...
HTML标记fort属性最大取值,CSS(2)---css字体、文本样式属性
css字体.文本样式属性这篇主要讲CSS文本属性中的:字体样式属性和文本样式属性. 一.字体样式属性 CSS 字体属性主要包括:字体设置(font-family).字号大小(font-size) ...
CSS: CSS常用的文本样式属性
介绍:CSS常用的文本样式属性 color: 颜色 font-size: 字体大小 font-style (normal.italic.oblique): 字体样式(正常.斜体) font-wei ...
CSS样式相关知识点（一）：样式表、选择器、样式属性
一.样式表类型第一种方式:内联/行内样式(不推荐) 直接在html文件的元素标签中写样式第二种方式:内部样式表(新手练习可用) 将样式编写到head标签中的style标签里,通过CSS的选择器来选 ...
CSS 入门2（样式属性+元素溢出+显示特性+盒子模型）
css样式属性常用布局样式属性常用文本样式属性元素溢出显示特性盒子模型常用布局样式属性 <!DOCTYPE html> <html lang="en" ...
Css中设置列表项目符号属性,CSS如何设置列表样式属性，分享
列表样式属性在HTML中有2种列表.无序列表和有序列表,在工作中无序列表比较常用,无序列表就是ul标签和li标签组合成的称之为无序列表,那什么是有序列表呢?就是ol标签和li标签组合成的称之为有序列 ...
【Java前端】CSS(二)[选择器,显示模式,背景属性]
CSS(二) ①.Emmet语法 - 快速生成HTML结构 - 快速生成CSS样式 - 快速格式化代码 ②.CSS的复合选择器 - 后代选择器 - 子选择器 - 并集选择器 - 伪类选择器链接伪类选 ...
HTML5+CSS网页设计——文字样式属性
1.font-size : 用于设置文字的字号 <!doctype html> <html> <head> <meta charset="utf-8 ...
前端JavaScript DOM BOM 自学复盘 D1（DOM-获取DOM元素、修改HTML标签/表单/css样式属性、定时器-间歇函数）
内容概要 1. Web API 基本认知 1.1. 作用和分类 1.2. 什么是DOM 1.3. DOM作用 1.4 DOM树 1.4.1. DOM树是什么? 1.4.2. DOM 树的作用 1.5 ...

css概述、选择器以及样式属性

css概述、选择器以及样式属性相关推荐

最新文章

热门文章