html制作网站的步骤,百度搜索入口,网址导航网站建站,北海哪里做网站建设目录
如何学习CSS
1.1什么是CSS编辑
1.2发展史
1.三种导入方式
1.1、行内样式
1.2、外部样式
1.3、嵌入方式
2.选择器
2.1、基本选择器
#xff08;1#xff09;元素选择器
#xff08;2#xff09;类选择器
#xff08;3#xff09;id选择器#xff1a;必…目录
如何学习CSS
1.1什么是CSS编辑
1.2发展史
1.三种导入方式
1.1、行内样式
1.2、外部样式
1.3、嵌入方式
2.选择器
2.1、基本选择器
1元素选择器
2类选择器
3id选择器必须唯一
2.2层次选择器
1后代选择器
2子选择器
3相邻兄弟选择器
4通用选择器
2.3结构伪类选择器
1ul的第一个子元素
2ul的最后一个子元素
2.4属性选择器 如何学习CSS
1、什么是CSS
2、CSS怎么用快速入门
3、CSS选择器重点难点
4、美化网页文字、阴影、超链接、列表、渐变
6、盒子模型
7、定位
8、网页动画
什么是CSS CSS (Cascading Style Sheets层叠样式表是一种用来为结构化文档如 HTML 文档或 XML 应用添加样式字体、间距和颜色等的计算机语言CSS 文件扩展名为 .css。 发展史 CSS11996年推出CSS1是第一版的CSS规范它引入了一套基本的样式属性和选择器使得开发者可以通过样式表将样式应用于HTML文档。CSS1提供了对字体、颜色、背景、边框等基本样式的控制。它为网页布局和样式提供了一些基础但功能相对有限。 CSS21998年推出CSS2是CSS的第二版规范引入了更多的功能和选择器增强了样式控制的能力。它引入了浮动、定位和层叠等特性使得开发者能够更好地控制和布局网页元素。CSS2还引入了伪类和伪元素选择器允许开发者根据元素的状态或位置选择应用样式。 CSS32001年开始持续发展CSS3是CSS的下一代规范由一系列模块组成每个模块引入了新的特性和功能。CSS3引入了更多的选择器、盒模型属性、颜色和背景属性、文本效果、过渡和动画效果、多列布局等。它还引入了媒体查询Media Queries允许开发者根据设备的属性和特征应用不同的样式从而实现响应式设计。CSS3的发展是渐进式的新的模块和特性不断被添加和标准化。 1.三种导入方式
1.1、行内样式
div stylebackground: red/div
1.2、外部样式
1链接式
headlink relstylesheet typetext/css hrefstyle.css
/head2导入式
styleimport url(style.css);
/style1.3、嵌入方式
嵌入方式指的是在 HTML 头部中的 style 标签下书写 CSS 代码。
headstyle.content {background: red;}/style
/head2.选择器 元素选择器Element Selector通过元素名称选择 HTML 元素。例如p 选择器将选择所有 p 元素。 类选择器Class Selector通过类别名称选择具有特定类别的 HTML 元素。类选择器以 . 开头后面跟着类别名称。例如.highlight 选择器将选择所有具有类别为 highlight 的元素。 ID 选择器ID Selector通过元素的唯一标识符ID选择 HTML 元素。ID 选择器以 # 开头后面跟着 ID 名称。例如#logo 选择器将选择具有 ID 为 logo 的元素。 属性选择器Attribute Selector通过元素的属性选择 HTML 元素。属性选择器可以根据属性名和属性值进行选择。例如input[typetext] 选择器将选择所有 type 属性为 text 的 input 元素。 后代选择器Descendant Selector通过指定元素的后代关系选择 HTML 元素。后代选择器使用空格分隔元素名称。例如div p 选择器将选择所有在 div 元素内的 p 元素。 子元素选择器Child Selector通过指定元素的直接子元素关系选择 HTML 元素。子元素选择器使用 符号分隔父元素和子元素。例如ul li 选择器将选择所有 ul 元素的直接子元素中的 li 元素。 相邻兄弟选择器Adjacent Sibling Selector通过指定元素之间的相邻兄弟关系选择 HTML 元素。相邻兄弟选择器使用 符号分隔两个相邻元素。例如h2 p 选择器将选择紧接在 h2 元素后的 p 元素。 通用选择器Universal Selector选择所有 HTML 元素。通用选择器使用 * 符号。例如* 选择器将选择页面上的所有元素。 2.1、基本选择器
1元素选择器 h1选择器将选择所有 h1 元素。 2类选择器 .head选择器选择所有类别为 head 的元素。 好处可以将多个标签归类是同一个class的可以复用 3id选择器必须唯一 如下代码#runoob 选择器将选择具有 ID 为 runoob 的元素。
#runoob {width: 200px;
} 优先级idclass标签 2.2层次选择器
1后代选择器
body p 选择器将选择所有在 body 元素内的 p 元素。 2子选择器
body p 选择器将选择所有 body 元素的直接子元素中的 p 元素。 3相邻兄弟选择器
h2 p 选择器将选择紧接在 h2 元素后的一个 p 元素。 4通用选择器
* 选择器将选择页面上的所有元素。 2.3结构伪类选择器 :first-child 所有兄弟元素中的第一个 :last-child 所有兄弟元素中的最后一个 :nat-child 所有兄弟元素中的第n个 :first-of-type 所有 同类型 兄弟元素中的第一个 :last-of-type 所有 同类型 兄弟元素中的最后一个 :nth-of-type(n) 所有 同类型 兄弟元素中的第 n 个 2.4属性选择器
1a[id]
选择含有id属性的a元素 2a[idfirst]
选择id属性值为first 的a属性 3a[id*links]
选中id属性值中包含“links”的a元素 4 a[href^http]
选中href属性中以http开头的a元素 5a[href$png]
选中href属性中以png结尾的a元素 其他
选择器示例示例说明CSS.class.intro选择所有classintro的元素1#id#firstname选择所有idfirstname的元素1**选择所有元素2elementp选择所有p元素1element,elementdiv,p选择所有div元素和 p 元素1element.classp.hometown选择所有 classhometown 的 p 元素1element elementdiv p选择div元素内的所有p元素1elementelementdivp选择所有父级是 div 元素的 p 元素2elementelementdivp选择所有紧跟在 div 元素之后的第一个 p 元素2[attribute][target]选择所有带有target属性元素2[attributevalue][target-blank]选择所有使用target-blank的元素2[attribute~value][title~flower]选择标题属性包含单词flower的所有元素2[attribute|language][lang|en]选择 lang 属性等于 en或者以 en- 为开头的所有元素2:linka:link选择所有未访问链接1:visiteda:visited选择所有访问过的链接1:activea:active选择活动链接1:hovera:hover选择鼠标在链接上面时1:focusinput:focus选择具有焦点的输入元素2:first-letterp:first-letter选择每一个p元素的第一个字母1:first-linep:first-line选择每一个p元素的第一行1:first-childp:first-child指定只有当p元素是其父级的第一个子级的样式。2:beforep:before在每个p元素之前插入内容2:afterp:after在每个p元素之后插入内容2:lang(language)p:lang(it)选择一个lang属性的起始值it的所有p元素2element1~element2p~ul选择p元素之后的每一个ul元素3[attribute^value]a[src^https]选择每一个src属性的值以https开头的元素3[attribute$value]a[src$.pdf]选择每一个src属性的值以.pdf结尾的元素3[attribute*value]a[src*runoob]选择每一个src属性的值包含子字符串runoob的元素3:first-of-typep:first-of-type选择每个p元素是其父级的第一个p元素3:last-of-typep:last-of-type选择每个p元素是其父级的最后一个p元素3:only-of-typep:only-of-type选择每个p元素是其父级的唯一p元素3:only-childp:only-child选择每个p元素是其父级的唯一子元素3:nth-child(n)p:nth-child(2)选择每个p元素是其父级的第二个子元素3:nth-last-child(n)p:nth-last-child(2)选择每个p元素的是其父级的第二个子元素从最后一个子项计数3:nth-of-type(n)p:nth-of-type(2)选择每个p元素是其父级的第二个p元素3:nth-last-of-type(n)p:nth-last-of-type(2)选择每个p元素的是其父级的第二个p元素从最后一个子项计数3:last-childp:last-child选择每个p元素是其父级的最后一个子级。3:root:root选择文档的根元素3:emptyp:empty选择每个没有任何子级的p元素包括文本节点3:target#news:target选择当前活动的#news元素包含该锚名称的点击的URL3:enabledinput:enabled选择每一个已启用的输入元素3:disabledinput:disabled选择每一个禁用的输入元素3:checkedinput:checked选择每个选中的输入元素3:not(selector):not(p)选择每个并非p元素的元素3::selection::selection匹配元素中被用户选中或处于高亮状态的部分3:out-of-range:out-of-range匹配值在指定区间之外的input元素3:in-range:in-range匹配值在指定区间之内的input元素3:read-write:read-write用于匹配可读及可写的元素3:read-only:read-only用于匹配设置 readonly只读 属性的元素3:optional:optional用于匹配可选的输入元素3:required:required用于匹配设置了 required 属性的元素3:valid:valid用于匹配输入值为合法的元素3:invalid:invalid用于匹配输入值为非法的元素3:has:has允许根据其后代元素来选择一个元素。3:is:is接收任何数量的选择器作为参数并且返回这些选择器匹配的元素的并集。3
3.样式
3.1文字样式
风格/粗细/大小/颜色 合并一起写
.p1{font: oblique 100 16px 楷体;}
3.2 文本样式
颜色
排版
段落缩进
高度
