css的基本操作学习--css样式，选择器，hover，文字属性，文本属性，背景

什么是css？

通配符选择器

<head>/*  *通配符选择器 匹配任何元素 */*{margin: 0;padding: 0;}
</head>

css样式有三种

　　一种是内嵌，写在head的style里面

　　　　　　<style>div{/*内嵌的css*/width: 200px;height: 200px;background: blue;}</style>

　　一种是外链，写在单独的.css文件里面

　　　　通过link标签（link + tab）填写路径的.css文件名即可

　　　　　　<head><meta charset="UTF-8"><link rel="stylesheet" href=""><title>css</title></head>

　　一种是标签，直接写在标签里面

　　　　　　<body><div style="width: 200px;height: 200px;background: lawngreen"></div></body>

优先级：标签样式>内嵌样式 >外链样式

因为存在三种方法，所以在开发中总会产生耦合，所以存在一个选择器的概念

优先级：id选择器>class选择器>标签选择器

选择器

　　用于准确的选中元素，赋予样式

选择器权重

　　谁的权重大，就听谁的，谁的权重大，就用谁的样式

　　　　1 class选择器

　　　　　　通过标签的class属性，选择对应的元素，借助类的概念，一处定义，多处使用

　　　　2 id选择器

　　　　　　通过标签的id属性，选择对应元素。注：id选择器唯一

　　　　3 群组选择器

　　　　　　可以同时选择多个标签的选择器

　　　　4 层次选择器

　　　　　　分为兄弟，子代，相邻，后代，四种选择器

class选择器（.class名）借助类的概念，一处定义，多处使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>css</title><style>.wrap{background: aqua;}</style>
</head>
<body><div class="wrap">3</div><div class="wrap">4</div></body>
</html>

id选择器（.id名）id选择器唯一

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>css</title><style>#box{background: red;}</style>
</head>
<body><div id="box">2</div>
</body>
</html>

群组选择器（群组选择器对几个有相同属性的选择器进行样式设置两个选择器之间必须用逗号隔开）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>选择器</title><style>*{margin: 0;padding: 0;}/*群组选择器，逗号分隔，都拥有样式属性*/div,p{width: 100px;height: 50px;background: lawngreen;}</style>
</head>
<body><div>div1</div><p>p1</p><p>p2</p><div><p>p3</p><p>p4</p></div></body>
</html>

层次选择器

　　兄弟选择器(~)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>选择器</title><style>*{margin: 0;padding: 0;}/*兄弟选择器 操作的对象是该元素下（下方）的所有兄弟元素*/div~p{width: 100px;height: 50px;background: lawngreen;}</style>
</head>
<body><div>div1</div><p>p1</p><p>p2</p><div><p>p3</p><p>p4</p></div></body>
</html>

　　子代选择区（>）只会选儿子，不会选孙子

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>选择器</title><style>*{margin: 0;padding: 0;}/*子代选择器 选择某个元素下面的子元素*/div>p{width: 100px;height: 50px;background: lawngreen;}</style>
</head>
<body><div>div1</div><p>p1</p><p>p2</p><div><p>p3</p><p>p4</p></div>
</body>
</html>

　　相邻选择器：（+）同级元素相邻！隔开就不行

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>选择器</title><style>*{margin: 0;padding: 0;}/*相邻选择器操作的对象是该元素的同级元素选择div相邻的下一个兄弟元素选择到紧随目标元素后的第一个元素挨着的兄弟元素*/div+p{width: 100px;height: 50px;background: skyblue;}</style>
</head>
<body><div>div1</div><p>p1</p><p>p2</p><div><p>p3</p><p>p4</p></div>
</body>
</html>

　　后代选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>li{list-style: none;}/*后代选择器 之后要是后代*/div li{width: 100px;height: 50px;background: aqua;}</style>
</head>
<body><div><ul><li>1</li><li>2</li><li>3</li></ul><ol><li>1</li><li>2</li><li>3</li></ol></div><ul><li>1</li><li>2</li><li>3</li></ul>
</body>
</html>

复杂后代选择器优先级的比较

1.先比id(最高位) class（中间位） tagName（个数位）

1 2 3

2.id选择器个数不相等，id越多，优先级越高

3.id选择器个数相同,则看class,class多的优先级高

4.class个数相等，就看tagName个数

伪类选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>伪类选择器</title><style><!--顺序不能乱-->/*LoVeHAte*/a:link{/*link 未被点击的链接*/color: red;}a:visited{/*已被点击的链接*/color: green;}a:hover{/*鼠标悬停其上的元素  这个一定要掌握*/color: yellow;}a:active{/*鼠标已经再其上按下但是还没有释放的元素*/color: blue;}</style></head>
<body><a href="http://www.baidu.com">baidu</a>
</body>
</html>

　　重点了解hover：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div{width: 100px;height: 100px;background: skyblue;}div:hover{  /*div:hover  改变的是div本身*/background: red;width: 300px;height: 200px;cursor: pointer;/*手指*//*cursor: default; 箭头*//*cursor: wait; 等待*//*cursor: help;*/}div:hover p{/*div:hover p 当div被鼠标划入的时候 改变后代p*/width: 50px;height: 30px;background: aqua;}</style>
</head>
<body><div><p></p></div>
</body>
</html>

css文字属性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/*设置网页字体*//*html{*//*font-size: 20px;*//*}*/
/*font-family 字体类型浏览器默认的字体是微软雅黑，字体中有多个字体的时候，如果前面的字体没有就使用后面的字体*/.box1{font-family: Arial,Algerian;}/*font-size   字体大小单位 px rem % empx   谷歌浏览器默认字体大小16px,最小是12pxrem  相对于html(根标签)的字体大小em   等于父级的字体尺寸——相对于父级字体大小而言的%    相对于父容器中字体的%调整  这个要知道
*/.box2{font-size: 32px;}.box3{font-size: 12px;}.box4{font-size: 2rem;}.box5{font-size: 2em;}/*font-weight 字体粗细关键字normal 默认字体lighter 较细bold 加粗   这个要知道bolder 很粗给值只能100-900的整百数400相当于正常的700相当于bold*/.box6{font-weight: lighter;}.box7{font-weight: 700;}/*font-style  字体类型normal 默认 文字正常italic  文字斜体（属性）oblique  文字斜体*/.box8{font-style: italic;}/*color  文字颜色关键字英文单词  red green16进制（0-9 a-f）#5544aa  #54a #abd456#dddddd  #dddrgb(0-255,0-255,0-255)r redg greenb bluergba(0-255,0-255,0-255,0-1)r redg greenb bluea alpha(透明度)0 完全透明1 完全不透明*/.box9{/*color: red;*/color: rgb(255,25,10);}.box10{/*color: #29aa60;*/color: rgba(255,25,10,0.5);}</style>
</head>
<body><div class="box1"> hello word 123 你好</div><div class="box2"> hello word 123 你好</div><div class="box3"> hello word 123 你好</div><div class="box4"> hello word 123 你好</div><div class="box5"> hello word 123 你好</div><div class="box6"> hello word 123 你好</div><div class="box7"> hello word 123 你好</div><div class="box8"> hello word 123 你好</div><div class="box9"> hello word 123 你好</div><div class="box10"> hello word 123 你好</div><div style="font-size: 20px">1<div style="font-size: 2em">2</div></div>
</body>
</html>

css文本属性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/*white-space:  换行方式normal 正常换行nowrap 不换行*/div{width: 200px;background: skyblue;white-space: nowrap;/*超出隐藏*/overflow: hidden;/*省略号*/text-overflow: ellipsis;}/*text-indent 首行缩进（em）line-height 行高  *****letter-spacing 字距word-spacing 词距*/.box{width: 300px;text-indent: 2em;line-height: 30px;letter-spacing: 2px;}/*div中的文字垂直居中：line-height:值。值等于div的高度。line-height: 80px;text-align 文本水平对齐方式left 默认值 向左对其rightcenter   ******/.box1{text-align: center;}/*text-transform 文本大小写none 默认值 无转换发生uppercase  转换成大写lowercase  转换成小写capitalize 将英文单词的首字母大写*/div{text-transform: uppercase;}</style>
</head>
<body><div>Python是纯粹的自由软件， 源代码和解释器CPython遵循 GPL(GNU General Public License)协议。Python语法简洁清晰，特色之一是强制用空白符(white space)作为语句缩进。</div><p class="box">Python是纯粹的自由软件， 源代码和解释器CPython遵循 GPL(GNU General Public License)协议。Python语法简洁清晰，特色之一是强制用空白符(white space)作为语句缩进。</p><p class="box1" style="background: skyblue;height: 50px;line-height: 50px;">你好哇</p>
</body>
</html>

css背景

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div{width: 600px;height: 400px;/*background-color: skyblue;*//*background-image: url("img/0.jpg");*//*background-repeat: no-repeat;*//*background-repeat: repeat-x;*//*background-repeat: repeat-y;*//*background-size: contain;*//*background-position: 90px;*/background: skyblue url("img/0.jpg") no-repeat center center/300px 300px;/*background: color image repeat position/size*/}/*background-color 背景色background-image 背景图片background-repeat 背景平铺repeat 平铺 默认repeat-x  平铺xrepeat-y  平铺ynp-repeat  不平铺注意：只有背景图片的宽高小于被设置的元素的宽高，才会有平铺效果background-position 背景位置 x轴 y轴x轴 left center righty轴 top center bottom如果只给一个值，默认在x轴，y轴默认center(50%)% pxbackground-size 背景大小% px给一个值的时候，默认x轴，y轴默认auto auto会等比缩放cover 等比例缩放直到铺满x,y轴 可以铺满整个框 但是不一定能看到完整的图片contain 等比例缩放x轴或者y轴其中的一个方向 不一定铺满 但是可以看到整个图片*/</style>
</head>
<body><div></div></body>
</html>

转载于:https://www.cnblogs.com/pywjh/p/9554050.html

css的基本操作学习--css样式，选择器，hover，文字属性，文本属性，背景相关推荐

css-day01笔记-CSS初识、基础选择器、文字和文本样式
typora-copy-images-to: media 第01阶段.web基础:css-day01笔记-CSS初识.基础选择器.文字和文本样式一.CSS层叠样式表学习目标理解 css的目的作用 ...
CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表
前言:本篇文章为 CSS 基础系列笔记第一篇,参考黑马程序员pink老师前端入门教程如有侵权联系删除,如有问题欢迎指出. 其他CSS基础相关文章: CSS基础「二」复合选择器 / 元素显示模式 / ...
CSS3基础(基础认知,选择器,字体属性,文本属性,CSS 的三种引入方式)
CSS3基础 1. 基础认知 1.1 CSS 简介 CSS 的使用场景是什么? 美化网页,布局页面 CSS 的中文名称是什么? 层叠/级联样式表(Cascading Style Sheets) CSS ...
CSS的简要学习---CSS介绍（待补充）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
CSS颜色尺寸字体属性文本属性
CSS基础知识 1.1基本概念 CSS指层叠样式表(Cascading Style Sheets) 为什么需要CSS HTML描述了要呈现的内容,而CSS则定义了这些内容的呈现形式,比如字体.颜色等. ...
CSS（二）：常用CSS样式[文字、文本、背景......]
文字样式连写格式:font:style weight size family; font-style字体样式 font-style: italic(倾斜)/ normal (默认值) 正常 ; fo ...
前端小白的css学习笔记——简介、选择器、字体属性和文本属性（最后有思维导图哦）
简介 css是层叠样式表的(Casading Style Sheets)的简称.有时会成为css样式表或级联样式表.用来美化HTML,让网页更漂亮,布局更简单.使结构(HTML)和样式(css)相 ...
Web技术基础学②——初步学习CSS
初步学习CSS 目录初步学习CSS 前言 ✍CSS如何使用? ✍CSS相关样式 ✎颜色.尺寸及对齐 ✎盒子模型 ✎边框与边距 ✎定位 ✎定位 ✎浮动 ✎不透明度 ✎组合选择器 ✎伪类和伪元素 ✍CS ...
CSS基础「二」复合选择器 / 元素显示模式 / 背景 / 三大特性
本篇文章为 CSS 基础系列笔记第二篇,参考黑马程序员pink老师前端入门教程如有侵权联系删除,如有问题欢迎指出. 其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 ...

css的基本操作学习--css样式，选择器，hover，文字属性，文本属性，背景

css的基本操作学习--css样式，选择器，hover，文字属性，文本属性，背景相关推荐

最新文章

热门文章