首页 > 其他分享 >CSS3第一天(基础选择器+复合选择器)

CSS3第一天(基础选择器+复合选择器)

时间:2024-08-07 14:08:07浏览次数:11  
标签:CSS3 第一天 样式 标签 元素 font 选择器 属性

1.选择器

基础选择器:标签选择器(某一类标签)、类选择器(一个或几个标签,最常用)、id选择器和通配符选择器

标签名{

属性1:属性值1;

属性2:属性值2;

...

}

类选择器(可以多个标签使用)

.类名{

属性1:属性值1;

...

}

<ul>

<li class="red">大雨</li>

</ul>

类名长的,可以用短横线分割,最好用英文,别出现数字和汉字
使用相同样式的,可以提前出来放一个样式类里,class里引用多个,空格分割,方便统一修改。

id选择器(只能被用一次,修饰页面唯一属性的元素) #id名字{xxx}  id在标签那声明一下。

通配符选择器(无需调用,作用于所有元素)*{}

 2.字体属性

font-family设置字体系列  标签名{font-family:'Microsoft YaHei',Arial,Helvetica,sans-serif}  会先看第一个字体电脑有没有,没有则看下一个。

font-size设置字体大小 单位px最常用  不同浏览器默认显示字号可能不一致,我们尽量给一个明确值大小。可以给body指定整个页面文字的大小。

font-weight设置字体粗细 normal默认不加粗 bold加粗 100-900 400等同于normal,700等同于bold,主要不跟单位。开发中更喜欢用数字。可以让strong、h变的不加粗。

font-style设置文本风格 倾斜italic 让em、i标签变的不倾斜用normal

font复合写法:

前提:对应位置不能变,size和family必须有

text-align文本对齐 left(默认) right center  设置元素内文本内容的水平对齐方式 

text-decoration装饰文本 none(默认) underline下划线(常用) overline上划线 line-through删除线-------------重点记:如何加、删下划线(即声明none)

text-indent缩进 2em:缩进当前元素2个文字大小的距离

line-height行间距 上间距=下间距 用标尺量第一行的下沿,到第二行的下沿。

CSS引入样式:

行内样式引入:<p style="color:pink; font-size:20px;">适用于修改小部分样式时,权重高。

内部样式表:单独写<style>里,可以控制一个页面。

外部样式表:需要引入,控制多个页面。<link rel="stylesheet" href="css文件路径">

 

复合选择器:

后代选择器 后代的样式更改  元素1 元素2 。。。{样式声明}

子元素选择器 只对亲儿子(离他最近的)的样式更改 元素1>元素2{样式声明} 

并集选择器 作用于多组声明共同的属性 元素1,元素2{样式声明}

链接伪类选择器 a:link(未点击、访问过) a:visited(点击过的) a:hover(鼠标经过时) a:active(鼠标点击时)

注意按以上顺序love hate(lvha)  项目中,常常先写a的样式,再a:lvha的样式

focus伪类选择器  input:focus{}   input获得光标时设置的样式

 

标签:CSS3,第一天,样式,标签,元素,font,选择器,属性
From: https://www.cnblogs.com/fengok/p/18345388

相关文章

  • jQuery入门(二)jQuery选择器
    JQuery选择器选择器:类似于CSS的选择器,可以帮助我们获取元素。例如:id选择器、类选择器、元素选择器、属性选择器等等。jQuery中选择器的语法:$();一、jQuery的选择器(一)基本选择器1.元素选择器语法:$("元素的名称")作用:根据元素名称获取元......
  • CSS3新特性
    目录:一、选择器的扩展1.属性选择器2.伪类选择器3.伪元素选择器二、盒子模型的增强1.box-sizing属性2.边框圆角(border-radius)3.盒阴影(box-shadow)三、过渡和动画效果1.过渡效果2.动画效果四、响应式布局1.媒体查询(mediaquery)2.弹性布局(Flexbox)一、选择器......
  • 爬虫:xpath高级使用,bs4使用,bs4-css选择器
    xpath高级使用fromlxmlimportetree#由于本次要格式化的内容是一个文件,所以用parse,如果是一个html格式的字符串就用HTMLhtml=etree.parse('02_xpath.html')#可以连接多个但是每两个之间要用一个管道符来连接#print(html.xpath('//ol/li[@data="one"]/text()|......
  • MyBatis学习笔记第一天
    引言数据持久化是将内存中的数据模型转换为存储模型,以及将存储模型转换为内存中数据模型的统称。例如,文件的存储、数据的读取以及对数据表的增删改查等都是数据持久化操作。MyBatis支持定制化SQL、存储过程以及高级映射,可以在实体类和SQL语句之间建立映射关系,是一种半......
  • el-slider实现一个能拖动的时间范围选择器
    el-slider实现一个能拖动的时间范围选择器<template><divstyle="width:200px"><el-sliderv-model="workTime":step="5":max="1435":marks="marks":format-tooltip="f......
  • el-date-picker周选择器获取选择的日期范围
    el-date-picker周选择器获取选择的日期范围<el-date-pickerv-model="formData.date"type="week"format="yyyy第WW周"placeholder="选择周"@change="weekChange"&......
  • el-date-picker月选择器获取选择的日期范围
    el-date-picker月选择器获取选择的日期范围<el-date-pickerv-model="monthValue"type="month"placeholder="选择月"value-format="yyyy-MM-dd"@change="monthChange"......
  • CSS学习:继承、权重关系、伪类选择器、媒体查询
    1、具有继承性质的样式(可以被子元素继承)color文字颜色 ;font-family字体族;font-size字体大小; font-weight字体粗细;line-height行高;text-align文本对齐方式;visibility可见性;cursor鼠标指针样式。2、不具有继承性质的样式(不能被子元素继承)background-color背景颜色;border......
  • Linux基础第一天
    Linux基础第一天Linux简介Linux是一种开源的操作系统,因此,Linux是一种免费的操作系统,可以在多种计算机设备上运行,包括台式机、笔记本电脑、服务器和嵌入式系统等。Linux操作系统具有稳定性、安全性和可扩展性等优点,广泛应用于服务器领域、云计算、超级计算机和移动设备等各种......
  • 6.选择器进阶与表单标签
    6.选择器进阶与表单标签1.选择器进阶ul,li{}:并集选择器,一次选择多个元素ulli:空格,这里表示ul后代所有的li标签。ul>li:大于号是指ul的子代标签li。伪类选择器:在特定情况下,给标签添加样式。 hover:当鼠标经过时,触发样式 active:当鼠标点击时,触发样式 visited:当访问过此网站......